CSS中如何使背景图片铺满?
我们可以通过background-size属性来实现将背景图片铺满整个元素的效果。
语法格式如下:
background-size: width height;
其中,width和height可以使用以下值进行设置:
1. 像素值(px)
2. 比例值(%)
3. 关键字(cover、contain)
示例代码如下:
.pre {
background-image: url("example.jpg");
background-repeat: no-repeat;
background-size: cover;
/* 设置背景图片铺满整个元素 */
}
p {
color: #333;
}
在上方示例代码中,我们首先设置了一个带有背景图片的pre元素,并使用了background-repeat属性来设置背景图片不进行平铺。
然后,我们使用background-size属性来设置图片以铺满整个元素进行展示。
最后,我们设置了一个p元素,用于展示文字,并使用color属性来设置文字的颜色。
通过以上的代码设置,在浏览器中打开页面时,我们可以看到背景图片已经成功地铺满整个pre元素。