背景颜色

Posted 2022-08-04 qtbb

　　　　　　　　1、设置背景样式：

　　　　　　　　　　background-color：#bfa；  // 设置背景颜色

　　　　　　　　　　background-image：url(相对路径)；    //   设置背景图片

　　　　　　　　2、可以同时给一个元素指定背景颜色和背景图片，背景颜色会作为背景图片的底色

　　　　　　　　　　background-repeat：repeat；   //  设置背景图片的重复方式

　　　　　　　　　　　　可选值：

　　　　　　　　　　　　　　repeat，默认值，背景图片会双方向重复（平铺）

　　　　　　　　　　　　　　no-repeat，背景图片不会重复，有多大就显示多大

　　　　　　　　　　　　　　repeat-x，背景图片沿水平方向重复

　　　　　　　　　　　　　　repeat-y，背景图片沿垂直方向重复

 

　　　　　　　　3、背景图片默认值贴着元素的左上角显示，通过 background-position 可以调整背景图片在元素中的位置

　　　　　　　　　　　　　可选值：

　　　　　　　　　　　　　　　1.　该属性可以使用 top 、right 、left 、bottom 、center 中两个值来指定背景图片的位置

　　　　　　　　　　　　　　　　　　top  left  左上

　　　　　　　　　　　　　　　　　　bottom  right   右下

　　　　　　　　　　　　　　　　如果值给出一个值，则第二个值默认是 center

 

　　　　　　　　　　　　　　　2.　也可以直接指定两个偏移量：background-position：100px 0px；  //  水平向右移动100个像素，垂直方向不动

　　　　　　　　　　　　　　　　　　第一个值是水平偏移量：正值，图片向右移动指定像素

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　负值，图片向左移动指定像素

　　　　　　　　　　　　　　　　　　第二个值是垂直偏移量：正值，图片向下移动指定像素

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　负值，图片向上移动指定像素

 

　　　　　　　　　　　　　　　3.　background-attachment 用来设置背景图片是否随页面一起滚动

　　　　　　　　　　　　　　　　　　　可选值：

　　　　　　　　　　　　　　　　　　　　　scroll，默认值，背景图片随窗口滚动

　　　　　　　　　　　　　　　　　　　　　fixed，背景图片会固定在某一位置，不随页面滚动　

　　　　　　　　　　　　　　　　　　当背景图片的 background-attachment 设置为 fixed 时，背景图片的定位永远相对于浏览器的窗口

 

　　　　　　　　4、外部资源加载时，并不是同时加载，浏览器会在资源被使用才去加载资源（例如多张背景图片，点击更换效果）

　　　　　　　　　　当触发按钮时，浏览器加载图片需要一定的时间，所以加载和显示过程会有一段时间，背景图片无法加载，导致出现闪烁的情况

　　　　　　　　　　　　为了解决多张图片不能同时加载出现闪烁的问题，可以把三张图片整合为一张图片，

　　　　　　　　　　　　使用 background-position 来切换显示的图片位置，这种技术叫做图片整合技术（CSS-Sprite）

　　　　　　　　　　　　　　优点：

　　　　　　　　　　　　　　　　1.将多张图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片

　　　　　　　　　　　　　　　　　　　　提高访问效率，提高用户的体验

　　　　　　　　　　　　　　　　2.讲多个图片整个为一张图片，减小图片的总大小，提高请求速度，增加用户体验

 

　　　　　　　　　　5、background 通过该属性可以同时设置所有背景相关的样式，没有顺序要求，也没有数量要求，不写的样式使用默认值。

　　　　　　　　　　　　　　　　background：#bfa  url(../img/3.png)  center   center  no-repeat  fixed ；