本文详细介绍了CSS中的背景属性，包括background-color（颜色）、background-image（图片）、background-repeat（图片重复）、background-size（图片大小）、background-position（图片位置）和background-attachment（图片是否随滚动）。举例说明了各种属性的用法和取值，帮助理解如何设置和控制元素的背景效果。
本文创建于2020年9月，以下为正文：
1.背景颜色 background-color
在HTML中，设置网页的背景颜色利用< body>标记的bgcolor属性。在CSS中，不但可以设置网页背景颜色，还可以设置文字的背景颜色。
默认值是transparent（透明的）
当同时定义了背景图像和颜色时，背景图像将覆盖在背景颜色之上
.divclass{background-color:#808080;}
代码示例：
< style>
div{
width:300px;
height:300px;
background-color:red;
}
< /style>
如果为整个页面设置背景色，只需要对< body>标记设置background-color属性即可。
示例：
body{
background-color：#0FC；
}
图例为：
background-color 颜色的取值：
1.关键字：red、blue等
2.16进制：#000000、#cccccc、#ff0000等
3.rgb（0，0，.5）
2.background-image 背景图片
默认值是none（没有图片）
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距
通过url使用绝对或相对地址指定图片
background-image：url("image/img.jpg");
url里面是图片的路径，设置整个页面以这个图片为背景，如果图片不足以覆盖，则复制扩展。
3.background-repeat背景图片是否重复
repeat：默认。背景图像将在垂直方向和水平方向重复
repeat-x：背景图像在水平方向重复
repeat-y：背景图像将在垂直方向重复
no-repeat ：背景图像将仅先是一次
< body>
{
background-image:url(stars.gif);
background-repeat:no-repeat;
}
< /body>
4.background-size 背景图片大小
length：设置背景图像的高度和宽度
第一个值设置宽度，第二个值设置高度
如果只设置一个值，则第二个值会被设置为”auto“。
percentage：以父元素的百分比来设置背景图像的宽度和高度
第一个只设置宽度，第二个值设置高度
如果只设置一个值，则第二个值会被设置为”auto“。
cover：把背景图像扩展至足够大，疑是背景图像完全覆盖北京区域
背景图像的某些部分也许无法显示在背景定位区域中。
contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
长度值：CSS长度值，比如px、em
百分数：比如：100%
5.background-position 背景图片位置（相对于外层容器）
背景位置属性用于设置背景图像的位置，这个属性只能应用于块级元素和替换元素。其中替换元素包括img、input、textarea、select和object。
当background-position取值为“像素值”
x（数值）：设置网页的横向位置，单位为px；
y（数值）：设置网页的纵向位置，单位为px；
x% y%：第一个值是水平位置，第二个值是垂直位置。左上角是0% 0%，右下角是100% 100%。 如果仅规定了一个值，另一个值将是50%。
xpos ypos：第一个值是水平位置，第二个值是垂直位置.左上角是0 0.单位是像素（0px 0px）或任何其他的CSS单位。 如果仅规定了一个值，另一个值将是50%。可以混个使用%和position值。
当background-position取值为“关键字” 默认值：0% 0%
top left：左上
top center：靠上居中
top right：右上
left center：靠左居中
center ：正中
right center：靠右居中
bottom left：左下
bottom center：靠下居中
bottom right：右下
6.background-attachment：背景图片是否随内容滚动
scroll：默认值。背景图像会随着页面其余部分的滚动而移动。
fixed：当页面的其余部分滚动时，背景图像不会移动。
语法为：
body{
background-image：url(bgimage.gif)；
background-attachment：fixed；
}
7.background 背景
background简写属性在一个声明中设置所有的背景属性
可以设置如下属性：
background-color 、background-image、background-repeat、background-attachment、background-position、background-size
如果不设置其中的某个值，也不会出问题，取默认值，比如background：url（’Smiley.gif‘）no-repeat；也是允许的。
（ps:如果您觉得有用，请点赞转发，让更多人看到哦）
小伙伴也可以加一下QQ群，可以获取资源以及更多学习方法哦
QQ群：1126277960 （暗号：优快云）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
