📒博客首页：男星的博客
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
❤️ 期待一起交流！
🙏作者水平很有限，如果发现错误，求告知，多谢！
🌺有问题可私信交流！！！

🌵CSS背景

通过CSS背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

background

• 语法：
  background : background-color || background-image || background-repeat || background-attachment || background-position

🎄背景颜色

background-color属性定义了元素的背景颜色。

background-color: 颜色值;

• 语法：
  background-color : transparent | color

• 参数：
  transparent : 背景色透明
  color : 指定颜色。请参阅颜色单位和附录：颜色表

• 说明：
  设置或检索对象的背景颜色。

• 示例：

p { background-color: silver }
div { background-color: rgb(223,71,177) } 
body { background-color: #98AB6F }
pre { background-color: transparent; } 

🌲背景图片

background-image属性描述了元素的背景图像，实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种应用场景）

background-image : none | url (url) 

• 语法：
  background-image : none | url (url)

• 参数：
  none : 　无背景图
  url : 　使用绝对或相对地址指定背景图像

• 说明：
  设置或检索对象的背景图像。

• 示例：

code { background-image: url("comet.jpg"); }
blockquote { background-image: url("c:\InetPub\MyPixs\comet.jpg"); } 
br { background-image: url(http://Fred.com/ImageFile/Q.gif); } 
body { background-image: none; } 

🌳背景平铺

将背景图平铺使用background-repeat，默认是使用平铺的

background-repeat : repeat | no-repeat | repeat-x | repeat-y 

• 语法：
  background-repeat : repeat | no-repeat | repeat-x | repeat-y

• 参数：
  repeat : 　背景图像在纵向和横向上平铺
  no-repeat : 　背景图像不平铺
  repeat-x : 　背景图像在横向上平铺
  repeat-y : 　背景图像在纵向平铺

• 说明：
  设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像。

• 示例：

menu { background: url("images/aardvark.gif"); background-repeat: repeat-y; } 
p { background: url("images/aardvark.gif"); background-repeat: no-repeat; } 

🌴背景图片位置

利用background-position属性可以改变图片在背景中的位置

background-position :x  y;

• 语法：
  background-position : length || length
  background-position : position || position

• 参数：
  length : 　百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
  position : 　top | center | bottom | left | center | right

• 说明：
  设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
  如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

• 示例：

div { background: url("images/aardvark.gif"); background-position: 35% 80%; } 
menu { background: url("images/aardvark.gif"); background-position: 35% 2.5cm; } 
a { background: url("images/aardvark.gif"); background-position: 3.25in; } 
body { background: url("images/aardvark.gif"); background-position: top right; } 

注意：

1. 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致
2. 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
3. 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
4. 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中

🌱背景图像固定（背景附着）

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。后期可以制作视察滚动的效果。

background-attachment : scroll | fixed 

• 语法：
  background-attachment : scroll | fixed

• 参数：
  scroll : 　背景图像是随对象内容滚动
  fixed : 　背景图像固定

• 说明：
  设置或检索背景图像是随对象内容滚动还是固定的。

• 示例：

html { background-image: url("anasazi.tif"); background-attachment: fixed; } 

🌿背景色半透明

background: rgba(0,0,0,0.3);

注意：

1. 最后一个参数是alpha透明度，取值范围是0~1之间
2. 也可以写成background: rgba(0,0,0,0.3);
3. 背景半透明是指盒子背景半透明，盒子里面的内容不受影响

☘️CSS背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x和y坐标
background-attachment	背景附着	scroll(背景滚动)/fixed(背景固定)
背景色半透明	背景颜色半透明	background: rgba(0,0,0,0.3);后面必须是4个值