CSS的背景属性

2024/10/25 12:18:22 来源：https://blog.csdn.net/m0_74742670/article/details/142385374 浏览: 次关键词：CSS的背景属性

background-colcor属性

设置背景颜色

 width: 200px;height: 200px;background-color: aqua;

background-image属性

设置元素的背景图像

元素的背景是元素的总大小，包括填充和边界（不包括外边距）默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小，从图像的左上角显示元素的那部分。

 width: 200px;height: 200px;background-image: url("20240917214642.png");

background-repeat属性

设置背景图像的平铺方式

repeat: 默认值

repeat-x: 只向水平方向平铺

repeat-y：只想垂直方向平铺

no-repeat: 不平铺

  div{margin: 10px;width: 100px;height: 100px;background-color: red;background-image: url("20240917214642.png")}#box1{background-repeat: repeat;}#box2{background-repeat: repeat-x;}#box3{background-repeat: repeat-y;}#box4{background-repeat: no-repeat;}

background-size属性

设置背景图像的大小

length: 设置背景图片的宽度和高度，第一个值为宽度，第二个值为高度，如果只设置一个值，则另一个值为auto。

percenbtage: 设置计算新颖位置区域的百分比，第一个为宽，第二个值为高，如果只设置一个值，则另一个值为auto。

cover: 保持图片横纵比并将图片缩放成完全覆盖背景区域的最大或最小。

contain: 保持图片横纵比并将图片缩放成适合背景定位区域的最大或最小。

div{margin: 10px;width: 100px;height: 100px;background-color: red;background-image: url("20240917214642.png")}#box1{background-size: 50px 50px;}#box2{background-size: 50% 50%;}#box3{background-size: cover;}#box4{background-size: contain;}