cover:图片宽高比不变、铺满整个容器的宽高,而图片多出的部分则会被截掉; contain:图片自身的宽高比不变,缩放至图片自身能完全显示出来,所以容器会有留白区域; 其实,从英文的意思来说:cover意味着“遮罩、遮盖”---此处理解为“塞满”较恰当,contain意为“包含”--也就是:我图片虽然缩放了,但是整个图是被“包...
6、background-size 检索或设置对象的背景图像的尺寸大小。 取值: <length>:用长度值指定背景图像大小。不允许负值。 <percentage>:用百分比指定背景图像大小。不允许负值。 auto:背景图像的真实大小。 cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。 contain:将背景图像等比缩放到宽度或高度与容器的...
cover 的核心则是要铺满容器，为了铺满容器，那么会选择能够包裹容器的（缩放、拉伸）比率，如上的示例，...
background-image: url(../img/dog.jpg); background-repeat: no-repeat; /* background-position: center; */ background-position: 10%; } .position2 { border: 1px solid #000; width: 1000px; height: 350px; background-image: url(../img/dog.jpg); background-repeat: no-repeat; backgrou...
left center 横向靠左,纵向居中 注:也可以用数值或百分比如background-position:10px 10px 表示横、纵坐标离左边、上边边框的距离; 6. background-attachment设置为是否固定 属性 属性值 描述 background-attachment: fixed 当页面的其余部分滚动时,背景图像固定不动 scroll 默认值,背景图像随着页面元素的滚动而移动 ...
background-image: url(./ecLogo.jpg); 1. 2. 【实战】背景图片自适应全屏 【实战】响应式巨幅背景大标题 背景渐变 背景定位 background-position 初始值为0% 0%,其等同于left top。 属性值为1个值时 另一个值为center 属性值为2个值时 若2个值都是关键字属性值。left关键字和right关键字表示水平方向,...
background-repeat:no-repeat; background-position(主要用于设置不重复的图片在背景区域的加载开始位置) 单词表示法(盒子背景图片与盒子背景区域进行对应方向对齐) 水平方向:left、center、right 垂直方向:top、center、bottom 2. 像素表示法 第一个属性值像素是几 背景图片在border以内针对左上顶点水平移动的距离 ...
background-size: 100% auto:等比缩放, 沿 X轴铺满, 但高不会填充整个区域;可能会留有空白; backgroundSize cover :等比缩放, 显示不完整,超出部分会被裁剪; backgroundSize contain:等比缩放, 但不会填充整个区域;可能会留有空白; 背景图片未设置
在background-attachment:fixed下会没有作用,因为此时的图片容器是相对于当前窗口了,最好的办法就是实践一下,就可以知道差别了: <style>.container{margin-top:10px;height:500px;border:10pxdottedrgba(255,0,0,0.3);padding:20px;background:url('../images/ylj.jpeg')centerleftno-repeat;}</style><div>...
浏览器显示效果如下图所示。从浏览器显示效果可以看出，background-position属性值设置为right center时，图片从元素的右侧和中间开始填充元素背景。background-position的属性值设置为百分比时，需要设置两个值（x% y%），第一个x%是水平位置，第二个y%是纵向位置。从元素的左上角开始，左上角是0％ 0％。右下角...