盒子背景设置

目录

1、设置背景颜色

2、设置背景图像

3、背景与图片不透明度的设置

4、设置背景图像平铺

5、设置背景图像的位置

6、设置背景图像固定

7、设置背景图像的大小

8、设置背景的显示区域

9、设置背景图像的裁剪区域

10、设置多重背景图像

11、线性渐变

12、重复渐变

---

1、设置背景颜色

background-color可以设置网页的颜色，默认值为transparent，即背景透明，此时子元素会显示其父元素的背景。

2、设置背景图像

background-image

3、背景与图片不透明度的设置

rgba(r,g,b,alpha)也可以设置不透明参数

opacity能够使任何元素呈现出透明效果

4、设置背景图像平铺

默认情况下，背景图像会自动沿着水平和垂直两个方向平铺，如果不希望图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制，该属性的取值

body{
            background-repeat: no-repeat;不平铺（图像位于元素的左上角，只显示一个）
            background-repeat: repeat;沿水平和垂直两个方向平铺（默认值）
            background-repeat: repeat-x;只沿水平方向平铺
            background-repeat: repeat-y;只沿垂直方向平铺
        }

5、设置背景图像的位置

如果将背景图像的平铺属性background-repeat定义为no-repeat,图像将默认以元素的左上角为基准点显示。

6、设置背景图像固定

如果希望背景图固定在屏幕的某一个位置，不随着滚动条移动，可以使用background-attachment属性来设置。

scroll：图像随页面元素一起滚动（默认值）

fixed：图像固定在屏幕上，不随页面元素滚动

7、设置背景图像的大小

background-size属性用于控制背景图像的大小

属性值	说明
像素值	设置背景图像的高度和宽度，第一个值设置宽度，第二个设置高度，如果只设置一个值，第二个值会默认auto
百分比	以父元素的百分比来设置背景图像的宽度和高度
cover	把背景图像扩展至足够大，使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显式在背景定位区域中
contain	把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

body{
            background-size: cover;
            background-size: contain;
        }

8、设置背景的显示区域

在默认情况下， background-position属性总是以元素左上角为坐标原点定位背景图像，background-origin属性可以改变这种定位方式，自行定义背景图像的相对位置。

body{
            background-origin:padding-box; 背景图像相对于内边距区域来定位
            background-origin:border-box;背景图相对于边框来定位
            background-origin:content-box;背景图相对于内容框来定位
        }

9、设置背景图像的裁剪区域

background-clip属性用于定义背景图像的裁剪区域。

body{
            background-clip: border-box;默认值，从边框区域向外裁剪背景
            background-clip: padding-box;从内边距区域向外裁剪背景
            background-clip: content-box;从内容区域向外裁剪背景
        }

10、设置多重背景图像

CSS3允许一个容器里显示多个背景图像，是背景图像效果更容易控制。

通过background-image、background-repeat、background-position、background-size等属性提供多个属性值来实现多重背景图像效果，各属性值之间用逗号隔开

11、线性渐变

在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色background-image:linear-gradient(渐变角度，颜色1，颜色2，颜色3.。。。。。)

 body{
            background-image: linear-gradient(to right,red,blue,green);
        }

12、重复渐变

https://www.runoob.com/cssref/func-repeating-linear-gradient.html