CSS —— 背景图片填满DIV、鼠标滑过放大图片

1、让背景图片填满DIV
应用background-size属性可以设置背景图片填满整个div，background-size取值及解释如下：

（1）background-size:cover

MDN文档解释说明：缩放背景图片以完全覆盖背景区，可能背景图部分看不见。（关键：它会保持图片的宽高比；当图片和容器具有不同的尺寸时，图片左、右、顶或底部会被裁剪）
示例：

<div class="case">
</div>

.case {background-repeat: no-repeat;background-size: cover;background-image: url('~static/images/bg1.jpg');
}

背景图片填满了div。

（2）background-size:contain

MDN文档解释说明：缩放背景图片以完全装入背景区，可能背景区部分空白。（关键：它会保持图片的宽高比；当图片和容器具有不同的尺寸时，空区域填充背景色）
示例：

<div class="case">
</div>

.case {background-repeat: no-repeat;background-size: contain;background-image: url('~static/images/bg1.jpg');
}

右侧空白，填充了背景色白色。

(3）background-size:width-value,height-value;

取值为固定大小、百分比和auto三种。固定大小就是写死；auto就是以背景图片的比例缩放背景图片。
百分比的MDN文档解释说明：指定背景图片相对背景区的百分比。背景区由background-origin设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框，不能为负值。
示例：

<div class="case">
</div>

.case {background-repeat: no-repeat;background-size: 400px 300px;background-image: url('~static/images/bg1.jpg');
}

2、背景区 background-attachment: fixed

当background-attachment值为fixed的时候，背景区为浏览器可视区（即视口），不包括滚动条。

分析及总结：

假设选作背景的图片尺寸为 260×234，则宽高比为260/234 = 1.11，一div的宽高为 200×200。
分析：
contain—— contain要保持宽高比将图片完全放入div中，div为 200x200。原图为 260x234，所以放入div，宽260—>200，那么高就得200/宽高比（1.11）=180，所以底部会有空白。
cover—— cover与contain完全放入相反，它要求完全覆盖。所以要覆盖就要从更小的高计算，高 234—>200，宽就等于200x1.11 = 222，因此，图片右侧会被裁剪掉一部分。
auto—— auto是原图大小放入。

3、鼠标划过元素，图片被放大

<div class="div"><img class="img" src="static/picture/17563_j7vbbpru.jpg"/>
</div>

.div{width: 400px;height: 400px;overflow: hidden; /*防止图片放大后溢出div*/
}
.img{max-width: 400px;max-height: 400px;transition: all 0.3s ease-out; /*ease-out 减速、慢慢结束*/-webkit-transition: all 0.3s ease-out;
}
.div:hover .img{z-index: 5;transform: scale(1.5); /*把图片放大1.5倍*/-webkit-transform: scale(1.5);
}

鼠标未移入：

鼠标移入后：

CSS —— 背景图片填满DIV、鼠标滑过放大图片相关推荐

html中的高和宽背景色怎么写,css background-size与背景图片填满div
background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...
html添加背景图片并且填满div,css background-size与背景图片填满div(示例代码)
background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...
如何用纯CSS将图片填满div，自适应容器大小
如何用纯CSS将图片填满div,自适应容器大小 2016-10-11 13:33 网页设计标签:css 代码 5987 3 我有一个模板,想按常规做一个div里面放置一个img图 ...
html5 css背景图片满,css background-size与背景图片填满div
back和第,.年过事工宗据指数遍互业经搞断果会ground-size与背景图片抖要支圈者器说是事天开的.年后编定功口小发还应久剑填满div 在开发中,常分博累发口小定逻间框加题览果些屏洁动理应有需要 ...
java鼠标滑入换图片_超简单---鼠标滑过变换图片
鼠标滑过,图片变换,非常实用,用JS可以很容易做到,但是JS完成后有个缺陷,在滑过的时候,第一次可能是空白的,然后才显示,因为要下载图片,网速慢的时候更加明显.其实用CSS实现更容易,而且不会出现上面 ...
CSS让背景图片填满DIV
.l_button {background: url(../img/botton.png) no-repeat;background-size:100% 100%; width: 118px;heig ...
设置div背景图片填满div
可以设置div的样式为 background:url('+UPLOAD_PATH+data.url+') no-repeat; background-size: 100%;width:100%;hei ...
html怎么使图片自动填充,CSS怎么将img图片填满父容器div自适应容器大小
CSS怎么将img图片填满父容器div自适应容器大小发布时间:2021-03-19 09:35:26 来源:亿速云阅读:114 作者:小新这篇文章将为大家详细讲解有关CSS怎么将img图片填满父 ...
html 图片填充方式,css怎么让图片填满？
在css中,可以将div的高度和宽度属性设置为100%,同时使用background-size属性设置背景图片为100%,便可以实现背景图片铺满屏幕. css怎么让图片填满? 1.新建一个HTML文件 ...

CSS —— 背景图片填满DIV、鼠标滑过放大图片

CSS —— 背景图片填满DIV、鼠标滑过放大图片相关推荐

最新文章

热门文章