归功于css3.0新增的一个属性background-size,可以简单的实现这个效果,这里用fixed和center定位背景图,然后用background-size来使图片铺满,具体css如下 html { background: url('../../../resources/images/welcome.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size:...
假设图片(100，50)，那么如果容器size是（500，300），按照等比进行计算：
背景全屏效果:background-size:cover; 背景模糊效果,用filter:blur(10px)实现.其他的有兴趣的可以百度css3 filter ,查看菜鸟教程或者w3c介绍。 其语法如下:filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | ...
background-size: 100% auto:等比缩放, 沿 X轴铺满, 但高不会填充整个区域;可能会留有空白; backgroundSize cover :等比缩放, 显示不完整,超出部分会被裁剪; backgroundSize contain:等比缩放, 但不会填充整个区域;可能会留有空白; 背景图片未设置 background-size: 100% auto效果 background-size:100% 100%...
在CSS3中,代码 background-size: cover;表示()A.将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内B.将背景图
background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll; /*元素相对区域宽度为50*/ background-size:cover; } 当使用了cover这个值的时候,那么正好就跟contain相反,其会正好覆盖整个背景相对区域,但是背景图片的某些部分就看不见。
background-size: 可以设定背景图像的尺寸,该属性是css3中的,在移动端使用的地方很多,比如最常见的地方在做响应性布局的时候,比如之前做的项目中有轮播图片,为了自适应不同大小分辨率的图片,我门需要使用css3中的媒体查询来针对不同的分辨率设置宽度和高度,虽然这种方式是可以解决问题,但是解决方式并不是太好,并且很...
background-size:cover; } 效果图: 看的出来:cover的效果是:图片同比缩放、塞满整个容器,而图片多余的部分则被剪掉了; css代码之no-repeat:contain版: .img-block{ width: 200px; height: 200px; border:2px solid black; background:url(../img/justice.jpg) no-repeat; ...
【题目】css3新增加的属性中,有一个是background-size:cover;这个问题应该在IE下要怎么兼容?具体情况是这样的:bodybackground: #8F391D url(../images/zp1.jpg) top center no-repeat fized-webkit-background-size: cover-moz-background-size: cover-o-background-size: coverbackground-size: coverfont...
background-size中,100%和cover都是用于将图片扩大或者缩放来适应整个容器 (1)background-size:100% 100%;---按容器比例撑满,图片变形; (2)background-size:cover;---把背景图片放大到适合元素容器的尺寸,图片比例不变,但是要注意,超出容器的部分可能会裁掉。