HTML背景图的显示
来源:互联网 发布:矩阵化为行最简形 编辑:程序博客网 时间:2024/05/16 06:54
一般写网站的时候,背景会有一张大图片,但是这个图片兼容性的处理是个令人头疼的问题,浏览器过大或者过小,都会影响图片的显示。
一般使用background-size属性,对这张图片的大小进行控制。值 描述 length
background-size还可以给值,如background-size:100% 100%;强制把图片拉伸,随着浏览器的放大而放大,但是他的缺点是会强制的把图片拉伸,使图片变形来达到要求。
下面是我自己写的,适用于手机和PC的背景图片的样式
.bg{ background: url(../images/bg.png); background-position: center 0; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.png',sizingMethod='scale');}
一般使用background-size属性,对这张图片的大小进行控制。
background-size: length|percentage|cover|contain;
设置背景图像的高度和宽度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 "auto"。
percentage以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 "auto"。
cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。background-size还可以给值,如background-size:100% 100%;强制把图片拉伸,随着浏览器的放大而放大,但是他的缺点是会强制的把图片拉伸,使图片变形来达到要求。
而使用cover属性则是按比例放大图片,图片不会失真,但是只是显示图片的一角,看不真切。
这个时候可以采用background-position属性,对这张背景图进行定位处理,浏览器过大或者过小的时候图片始终在中间显示,不会出现图片只显示一角的情况。
不过这些属性在IE下不兼容,需要使用滤镜。
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.png',sizingMethod='scale');
采用滤镜可以解决在IE下的问题。
0 0
- HTML背景图的显示
- html中背景图按比例缩放全屏显示
- html中背景图按比例缩放全屏显示
- 用background 显示背景图的部分
- 控制AlertDialog的显示位置和背景图
- [duilib]修复UIOption同时显示背景图和背景色时,背景图不显示的bug
- html背景图自适应
- HTML背景图铺满页面
- HTML中background-repeat 重复背景图属性的的作用
- css背景图与html插入img的区别
- HTML中设置背景图的两种方式
- html中背景图不随着鼠标的转动改变大小
- HTML&CSS——css设置背景图定位的问题
- css背景图与html插入img的区别
- css背景图与html插入img的区别
- 显示16色以上的位图作为背景图
- listview加背景图及显示斑马线的简单应用
- 解决android tabhost tab背景图不显示的问题
- C#扫雷(9*9阉割版)
- Sky数
- C++ Primer Plus 第6版 中文版 第4章编程练习
- linux 打包某用户所有文件,到另一机器上新建同名用户并导入备份文件
- 碰撞体(Collider)以及触发器(Is Trigger)----碰撞的条件,触发碰撞器和触发器的条件
- HTML背景图的显示
- struts2的工作流程和运行原理
- Groovy SQL 分页组件
- POJ 2653 线段相交问题
- 10.1-7 两个队列实现一个栈
- html空标签
- 实现异步多线程下载文件
- Bash shell位置参数
- 用Json实现PHP与JavaScript间数据交换