背景

背景颜色

background-color背景颜色可以使用 rga | rgba | 十六进制 等颜色格式

背景图片

可以使用 png| gif |jpeg 等图片做为背景使用

css

background-image: url(icon-s.jpg);

背景裁切

选项	说明
border-box	包括边框
padding-box	不含边框，包括内边距
content-box	内容区域

css

background-clip: border-box;

背景重复

用于设置背景重复的规则

选项	说明
repeat	水平、垂直重复
repeat-x	水平重复
repeat-y	垂直重复
no-repeat	不重复
space	背景图片对称均匀分布，中间有间隙，自适应

background-repeat: repeat-y

背景滚动

用于设置在页面滚动时的图片处理方式

选项	说明
scroll	背景滚动
fixed	背景固定

css

<style>
    .background-attachement-main {
        height: 500px;
        border: 1px solid #000;
        overflow: auto
    }

    .background-attachement {
        height: 3000px;
        background: url('https://images.pexels.com/photos/15258473/pexels-photo-15258473.jpeg?auto=compress&cs=tinysrgb&w=400&lazy=load') no-repeat;
       background-attachment: fixed;
       color: #fff;
    }
</style>   
<div class="background-attachement-main">
    <div class="background-attachement">hello world</div>
</div>

hello world

背景位置

用于设置背景图片的水平、垂直定位，可以设置多张图片的位置。

选项	说明
left	左对齐
right	右对齐
center	居中对齐
top	顶端对齐
bottom	底部对齐

居中对齐

css

background-position: center;
或
background-position: 50% 50%;

水平居右，垂直居中

css

background-position: right center;
或
background-position: 100% 50%;

使用具体数值定义

css

background-position: 100px 100px;
也支持使用负值
background-position: -200px 100px;

设置多张图片位置

css

background-position: 0 0, -15px 15px, 15px -15px, 0 0;

背景尺寸

选项	说明
cover	背景完全覆盖，可能会有背景溢出
contain	图片不溢出的放在容器中，可能会漏出部分区域

指定数值定义宽高尺寸

css

background-size: 50% 100%;
或
background-size: 200px 200px;

宽度固定高度自动

css

background-size: 50% auto;

多个背景

后定义的背景置于底层

css

background-image: url(xj-small.png), url(bg.png);

多属性定义

css

background-image: url(xj-small.png), url(bg.png);
background-repeat: no-repeat;
background-position: top left, right bottom;

可以一次定义多个背景图片。

css

background: url(x.png) left 50% no-repeat,
                url(bg.png) right 100% no-repeat red;

组合设置

可以使用一条指令设置背景

css

background: red url(1.png) no-repeat right 50% fixed;

盒子阴影

可以使用 box-shadow 对盒子元素设置阴影，参数为 水平偏移,垂直偏移,模糊度,颜色 构成。

html

<style>
    .box-shadow {
        width: 200px;
        height: 200px;
        background-color: #ccc;
        box-shadow: 10px 10px 5px #888888;
    }
</style>
<div class="box-shadow"></div>

颜色渐变

标志位：颜色过度的起始值和终止值即为标志位，起始和终止中间的部分为颜色本身，没有过度。可以通过微信截图，活动滑动鼠标观察rgb的值的变化。

html

 <style>
    .linear-gradient-mark {
        height: 100px;
        border: 1px solid #000;
        /* 25%、60%、80%、100%即为标志位 */
        background-image: linear-gradient(90deg, red 25%, blue 60% 80%, green 100%);
    }
</style>
<div class="linear-gradient-mark"></div>

中间值：两个过度颜色中间的位置即为中间值，表示，颜色渐变的中间的某个位置，可以调节，设置其过度的位置。

html

<div class="linear-gradient-25"></div>
<style>
    .linear-gradient-25 {
        height: 100px;
        border: 1px solid #000;
         /* 25%即为中间值 */
        background-image: linear-gradient(90deg, red, 25%, blue);
    }
</style>
<div class="linear-gradient-5"></div>
<input type="range" value="25" style="width: 100%;" disabled>

线性渐变

粗暴理解：在两个颜色之间，比如红色和黄色，通过0点和100%点的色值，计算出中间50%位置的色值，然后再通过0% 50%， 50% 100%计算出25%，75%的色值，以此类推。多个颜色的话就分别以相邻两个颜色的终点来计算两者之间的渐变色。

渐变中心点：默认渐变中心点为两个色值点的中间值，可通过参数移动中间点。以linear-gradient(30deg, red 10% , yellow 30%, blue 70%)为例，在红色向黄色渐变时，默认的渐变中心点在两者正中的位置，也就是20%的位置。linear-gradient(30deg, red 10% , 15%, yellow 30%, blue 70%)，通过在两者之间设定值，可以将中心点移动到15%的位置。

提示

可以通过微信截图或者其它截图工具观察rgba变化理解线性渐变。下方可放置多个进度条作为参考。

html

<style>
    .linear-gradient-0 {
        height: 200px;
        border: 1px solid #000;
        background-color: yellowgreen;
        background-image: linear-gradient(to right, rgba(255, 0, 0) 0%, blue 10% 30%, yellow 50% 70%, green 90% 100%);
}
</style>
<div class="linear-gradient-0"></div>
<input type="range" value="10" style="width: 100%;" disabled>
<input type="range" value="30" style="width: 100%;" disabled>
<input type="range" value="50" style="width: 100%;" disabled>
<input type="range" value="70" style="width: 100%;" disabled>
<input type="range" value="90" style="width: 100%;" disabled>

硬过度理解渐变参数

示例1

一个线性渐变的黄绿色背景图像。45deg表示渐变的方向为逆时针45度。rgba(255, 0, 0,.3)表示一种不带有透明度的红色，这里的1表示100%的不透明。背景图像分为四段，第一段从0%到25%是不带有透明度的红色，第二段从25%到50%是透明的，第三段从50%到75%又是带有30%透明度的白色，第四段从75%到100%是透明的。这样就形成了一个斜向的条纹效果。通过以上理解线性渐变的概念。

颜色后边若是两个百分比值，则两个百分比之间的部分即为该颜色值，即一个起始值，一个终止值。若为一个值则起始值和终止值一样，两边会以这个位置向两边过度。如果两个或多个颜色终止在同一位置，则在该位置声明的第一个颜色和最后一个颜色之间的过渡将是一条生硬线。起始0%不需要设置。起始值和终止值统称为标志位。

html

<style>
    .linear-gradient {
        height: 200px;
        width: 200px;
        border: 1px solid #000;
        background-color: yellowgreen;
        background-image: linear-gradient(45deg, rgba(255, 0, 0, 1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .3) 75%, transparent 75%, transparent 100%);
    }
</style>
<div class="linear-gradient"></div>

示例2

html

<style>
    .linear-gradient-1 {
        height: 200px;
        width: 200px;
        border: 1px solid #000;
        background: linear-gradient(red 0% 30%, yellow 30% 60%, blue 30% 100%);
    }
</style>
<div class="linear-gradient-1"></div>

绘制三角图形

html

<style>
    .linear-gradient-4 {
        height: 200px;
        width: 200px;
        border: 1px solid #000;
        background-color: yellowgreen;
        background-image: linear-gradient(45deg, yellow 50%, red 50%);
        /* 等价于background-image: linear-gradient(45deg, yellow 0 50%, red 50% 100%);  */
    }
    </style>
<div class="linear-gradient-4"></div>

结论

渐变区域即不连续数值的区域，如果连续则为硬过度。

创建方块背景图

一个30px的小方块分为四个图片，通过background-position移动对应图片，每一个linear-gradient就是一个图片。

html

<style>
    .linear-gradient-square {
        height: 90px;
        background-size: 30px 30px;
        border: 1px solid pink;
        background-position: 0 0, -15px 15px, 15px -15px, 0 0;
        background-image: linear-gradient(45deg, red 25%, transparent 0);
        background-image: linear-gradient(45deg, red 25%, transparent 0),
            linear-gradient(45deg, transparent 75%, red 0),
            linear-gradient(45deg, red 25%, transparent 0),
            linear-gradient(45deg, transparent 75%, red 0);
    }
</style>
<div class="linear-gradient-square"></div>

网格线

如果两个或多个颜色终止在同一位置，则在该位置声明的第一个颜色和最后一个颜色之间的过渡将是一条生硬线。

html

<style>
    .linear-gradient-gradline {
        height: 90px;
        background-size: 30px 30px;
        background-image: linear-gradient(to right, pink 1px, transparent 1px), linear-gradient(pink 1px, transparent 1px);
    }
</style>
<div class="linear-gradient-gradline"></div>

渐变重复

html

<style>
    .linear-gradient-repeat {
        height: 100px;
        background: repeating-linear-gradient(90deg, blue 0 25px, red 25px 50px);
    }
</style>
<div class="linear-gradient-repeat"></div>

径向渐变

径向渐变和线性渐变原理一样，不一样的地方是需要定义圆心或者说是中心点。位置的关键字为at，

设置渐变

css

background: radial-gradient(red, blue, green);

设置渐变宽度与高度

css

background: radial-gradient(100px 200px, red, blue, green);

左下渐变

css

background: radial-gradient(at bottom left, red, blue);

右下渐变

css

background: radial-gradient(at bottom right, red, blue);

左侧向中心渐变

css

background: radial-gradient(at center left, red, blue);

底部向中心渐变

css

background: radial-gradient(at 50% 100%, red, blue);

html

<style>
    .linear-gradient-sun {
        width: 150px;
        height: 150px;
        background: radial-gradient(red 0, yellow 30%, black 60%, black 100%);
    }
</style>
<div class="linear-gradient-sun"></div>

<div class="linear-gradient-sun"></div>

线性重复

镜像重复从第一个颜色到最后一个颜色为一个单位去看，不可以整个元素背景去看，整个元素背景去看是看的元素的整体重复效果。

html

<style>
    .linear-gradient-x-repeat {
        width: 350px;
        height: 100px;
        background: repeating-linear-gradient(to right, blue 0px, 25px, yellow 100px);

    }
</style>
<div class="linear-gradient-x-repeat"></div>

加强版理解，这个可以理解为一个整体的宽度为100px-20px=80px，中心点位置为50px-20px=30px。最前边的黄色30px的区域可以理解为一个整体从后补齐，最后20px则是按顺序重复。

html

<style>
    .linear-gradient-x-repeat-xx {
        width: 350px;
        height: 100px;
        background: repeating-linear-gradient(to right, blue 20px, 50px, yellow 100px);

    }
</style>
<div class="linear-gradient-x-repeat-xx"></div>

径向重复

100%为整体，0-25%为一个重复单位的四分之一，所以一共是四圈，占满整个元素，然后重复向外扩展。

html

<style>
    .linear-gradient-y-repeat {
        width: 200px;
        height: 200px;
        background: repeating-radial-gradient(100px 100px, red 0%, yellow 25%);
    }
</style>
<div class="linear-gradient-y-repeat"></div>

背景 ​

背景颜色 ​

背景图片 ​

背景裁切 ​

背景重复 ​

背景滚动 ​

背景位置 ​

居中对齐 ​

水平居右，垂直居中 ​

使用具体数值定义 ​

设置多张图片位置 ​

背景尺寸 ​

多个背景 ​

组合设置 ​

盒子阴影 ​

颜色渐变 ​

线性渐变 ​

硬过度理解渐变参数 ​

示例1 ​

示例2 ​

绘制三角图形 ​

创建方块背景图 ​

网格线 ​

渐变重复 ​

径向渐变 ​

​

线性重复 ​

径向重复 ​

背景

背景颜色

背景图片

背景裁切

背景重复

背景滚动

背景位置

居中对齐

水平居右，垂直居中

使用具体数值定义

设置多张图片位置

背景尺寸

多个背景

组合设置

盒子阴影

颜色渐变

线性渐变

硬过度理解渐变参数

示例1

示例2

绘制三角图形

创建方块背景图

网格线

渐变重复

径向渐变

线性重复

径向重复