css中background

百科大全

更新时间：2025-10-06 02:43:0820

admin管理员组
文章数量:1794759

css中background

昨天学前端，看到 css中的background-size属性，忽然对cover、contain属性值有点蒙，具体到底什么显示效果有点糊涂。

看了菜鸟教程的解释，还是不太明白。于是自己做了一个案例来验证，除了background-size：cover、background-size：contain，还有background-size：100% 100%，通过这个案例，总算把这三者的区别弄明白了。现分享给大家，希望对初学者有所帮助。

一、背景区域和背景图像宽高比例相等

在div中，设置其背景图像，如果图像的宽高比例和div区域的宽高比例相等，那么上述三种情况，背景图像都会铺满整个屏幕，显示效果没有什么区别。代码如下：

div{ background-image: url(img/776_580.png); margin: 20px; border: 1px solid #FF0000; background-repeat: no-repeat; width: 1164px; height:870px; }

这里使用的图像宽776px，高580px，div的宽度和高度是图像的1.5倍。

二、背景区域和背景图像宽高比例不相等

所设计案例完整代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background-size</title> <style type="text/css"> div{ background-image: url(img/776_580.png); margin: 20px; border: 1px solid #FF0000; background-repeat: no-repeat; width: 1080px; /*div比较宽的情况*/ height:580px; /*width: 776px; height:780px;*/ /*div较高的情况*/ } .proportion{ background-size: 100% 100%; } .contain{ background-size: contain; } .cover{ background-size: cover;/*铺满整个背景区域，图像显示不完整，图像不会变形*/ } </style> </head> <body> <p> <img src="img/776_580.png" > </p> <div class="proportion"> </div> <div class="contain"> </div> <div class="cover"> </div> </body> </html>

下面是显示效果和对比所得的结论： background-size: 100% 100%; 图像铺满整个背景区域，图像显示完整，图像有变形，水平方向或垂直方向有拉伸 background-size: contain; 图像不能铺满整个背景区域，区域右方或下方会有空白，图像显示完整，图像不会变形 background-size: cover;图像铺满整个背景区域，图像下端或右端显示不完整，图像不会变形

结合这个案例，再去看菜鸟教程的解释，应该就能清楚地理解它所说的含义了。

本文标签： css background

版权声明：本文标题：css中background 内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686968660a123590.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。