2021-09-16

CSS背景属性

属性：background-color 定义背景颜色
background-image 定义背景图片
background-repeat 定义背景图片是否重复及其重复方式
background-attachment定义背景图片是否跟随内容滚动
background-position定义背景图片的水平位置和垂直位置
background可以用一条样式定义各种背景属性
background-color
css中，颜色值通常以以下方式定义：

1. 十六进制 如：“#ff0000”
2. RGB 如：“rgb(255,0,0)”
3. 颜色名称 如：“blue”
   background-image
   用于设置元素的背景图片，默认值为none(不显示背景图片)如果设置了图片的URL，格式为url（图片的URL），则会从元素的左上角开始放置背景图片，并沿着x轴和y轴平铺，占满元素的全部尺寸。通常需要配合background-repeat控制图像的平铺
   background-repeat
   默认值为repeat，即图像沿着x轴和y轴平铺，还可以指定沿着x轴平铺repeat-x，沿着y轴平铺repeat-y，或者不平铺no-repeat，继承父元素该属性设置inherit
   background-attachment
   初始值为scroll表示背景图片会随着页面其余部分的滚动而滚动。fixed表示当页面其余部分滚动时，背景图像不会滚动。也可以设置inherit继承父元素的background-attachment设置
   background-position
4. 位置参数：x轴有3个参数，分别是left center right;y轴同样有3个参数，分别是top center bottom。通常x轴和y轴参数各取一个组成属性值，如果只给定一个值，则另一个值默认为center
5. 百分比：写为x%y%，第一个表示x轴的位置，第二个表示y轴的位置，左上角为0 0，右下角为100%100%。如果只给定一个值，则另一个值默认为50％
6. 长度：写为xpos ypos，第一个表示x轴离原点的长度，第二个表示y轴离原点的长度。其单位可以是px等长度单位，也可以与百分比混合使用
   background
   一个简写属性，可以在一个样式中将五个全部设置，也可以省略其中某几项，还可以直接设置inherit，从父元素继承