CSS背景处理

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

背景样式

背景颜色

如果想让一个区域具有纯色的背景，可以使用 background-color 进行设置，背景颜色可以是 rgb ， rgba ， #16 网页色。

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>



        span{

            color: white;

        }



    </style>

    <title>Document</title>

</head>

<body>



    <span>来看看我的背景色吧！</span>



</body>

</html>

背景颜色

背景图片

如果想加入背景图片，请使用 background-image:url(); 进行设置。

请注意：背景图片默认不会改变原本盒子的大小。与在盒子中插入 <img> 是不同的。

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>



        div{

            background-image: url("./33.jpg");

            color: green;

            font-weight: 700;

            height: 200px;

            width: 200px;

            text-align: center;

            line-height: 200px;

            border: solid 1px red;

            padding: 20px;

        }



    </style>

    <title>Document</title>

</head>

<body>



    <div>来看看我的背景图片吧~</div>



</body>

</html>

背景图片

背景剪裁

我们可以将背景设置为盒子的某一区域，比如 content 区域或者 padding 区域以及 border 区域。

请使用 background-clip 来进行指定。

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

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>



        div{

            background-image: url("./33.jpg");

            color: green;

            font-weight: 700;

            height: 200px;

            width: 200px;

            text-align: center;

            line-height: 200px;

            border: solid 1px red;

            padding: 20px;

            /* 背景图片为content区域 */

            background-clip: content-box;

        }



    </style>

    <title>Document</title>

</head>

<body>



    <div>来看看我的背景图片吧~</div>



</body>

</html>

背景剪裁

背景重复

如果背景图太小，那么默认会进行重复行为，如下所示。但是我们可以使用 background-repeat 为它指定如何重复。

选项	说明
repeat	水平、垂直重复
repeat-x	水平重复
repeat-y	垂直重复
no-repeat	不重复
space	背景图片对称均匀分布

不指定，默认 repea ：

指定为 no-repeat ：

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>



        div{

            background-image: url("./33.jpg");

            color: green;

            font-weight: 700;

            height: 500px;

            width: 500px;

            text-align: center;

            line-height: 200px;

            border: solid 1px red;

            /* 不重复产生图片 */

            background-repeat: no-repeat;

        }



    </style>

    <title>Document</title>

</head>

<body>



    <div></div>



</body>

</html>

取消背景重复

背景滚动

我们可以使用 background-attachment 为背景指定到底是跟随滚动条滚动还是在一个固定的位置不滚动。默认是 scroll ，即跟随滚动条滚动的。

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

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>



        main{

            /* 主容器要小于子容器才会出现滚动条 */

            overflow: auto;

            border: solid 1px red;

            height: 200px;

            width: 400px;

        }

        div{

            background-image: url("./33.jpg");

            height: 300px;

            width: 300px;

            /* 不重复产生图片 */

            background-repeat: no-repeat;

            /* 子容器背景图固定 */

            background-attachment: fixed;

        }



    </style>

    <title>Document</title>

</head>

<body>

    <main>

        <div>文本在此</div>

    </main>





</body>

</html>

背景固定

背景位置

我们可以使用 background-position 设置背景图片的水平、垂直定位。

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

只设置 center 为水平，垂直居中。

设置 left center 则为水平居左，垂直居中。

设置 right center 则为水平居右，垂直居中。

设置 center left 则为水平居中，垂直居左。

设置 center right 则为水平居中，垂直居右。

当然，我们也可以使用 % 来为它进行设置， %50 为居中。

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>



        div{

            background-image: url("./33.jpg");

            height: 500px;

            width: 500px;

            border: solid 1px red;

            /* 不重复产生图片 */

            background-repeat: no-repeat;

            /* 水平居左，垂直居中 */

            background-position:0% 50%;

        }



    </style>

    <title>Document</title>

</head>

<body>



    <div></div>



</body>

</html>

背景位置

背景尺寸

我们可以使用 background-size 来设置背景尺寸，单位可以是单词， % ， px ， em 以及 rem 。

当使用单词设置的时候一个词就可以搞定，而其他设置时需要两个单位，第一个为背景高度，第二个为背景宽度。

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

指定数值定义宽高尺寸

background-size: 50% 100%;

或

background-size: 200px 200px;

宽度固定高度自动（这个常用）

background-size: 50% auto;

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>



        div{

            background-image: url("./33.jpg");

            height: 200px;

            width: 200px;

            border: solid 1px red;

            background-repeat: no-repeat;

            /* 水平居左，垂直居中 */

            background-position:0% 50%;

            /* 背景自动铺满整个盒子 */

            background-size:cover;

        }



    </style>

    <title>Document</title>

</head>

<body>



    <div></div>



</body>

</html>

背景尺寸

简写

我们可以直接使用 background 来进行简写。

推荐顺序：颜色，地址，是否重复，背景位置或是否跟随滚动

如：

background:red url(./33.jpg) no-repeat border-box center;

多个背景

我们可以使用 background-image: url(路径), url(路径); 来一次指定多个背景。

就如同上面一样，我们一次给他定义了2个背景一个红色，一个图片。

背景阴影

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

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>



        div{

            height: 100px;

            width: 100px;

            border: solid 1px #ddd;

            box-shadow: 10px 10px 5px rgba(100, 100, 100, .5);

        }



    </style>

    <title>Document</title>

</head>

<body>



    <div></div>



</body>

</html>

背景阴影

颜色渐变

线性渐变

渐变一般都是在背景颜色中进行使用，格式为 background: linear-gradient(方向, 颜色, 颜色, ...); 。

/* 红色到绿色，可以看到是线性的渐变 */

background: linear-gradient(red, green);

使用 度数deg 可以改变渐变角度，如果为负数则代表相反方向。

/* 倾斜30°，红色到绿色 */

background: linear-gradient(30deg, red, green);

我们可以使用 to 方向1 方向2 指定渐变的方向，注意：不能用 度数deg 同时使用

/* 向右渐变 ，红色到绿色 */

background: linear-gradient(to right, red, green)

/* 向左渐变 ，红色到绿色 */

background: linear-gradient(to left, red, green)

/* 向左上渐变 ，红色到绿色 */

background: linear-gradient(to left top, red, green)

/* 向右下渐变 ，红色到绿色 */

background: linear-gradient(to right bottom, red, green)

同时，我们可以设置多颜色渐变。

/* 向右渐变 ，红色到绿色到蓝色到黄色 */

background: linear-gradient(to right, red, green, blue, yellow)

径向渐变

格式为 background: radial-gradient(方向, 宽度, 颜色, 颜色, ...); 。

/* 红色到绿色，可以看到是径向的渐变 */

background: radial-gradient(red, green);

我们可以设置渐变色的宽度。

/* 红色到绿色，设置宽度 */

background: radial-gradient(50px 50px,red, green);

我们可以使用 at 方向1 方向2 来进行渐变方向控制。

/* 红色到绿色，渐变方向为右上，由于设置了宽度，效果并不美观。*/

background: radial-gradient(at right top ,red 200px, green 20px);

/* 红色到绿色，渐变方向为左下，由于设置了宽度，效果并不美观。*/

background: radial-gradient(at left bottom ,red 200px, green 20px);

/* 红色到绿色，渐变方向为左侧向中心，由于设置了宽度，效果并不美观。*/

background: radial-gradient(at left center ,red 200px, green 20px);

/* 红色到绿色，渐变方向为底部向中心，由于未设置宽度，效果好一些了*/

background: radial-gradient(at bottom center ,red, green);

        }

我们依然可以设置很多颜色来进行渐变。

/* 红色到绿色到蓝色到黄色，渐变方向为底部向中心，由于未设置宽度，效果好一些了*/

background: radial-gradient(at bottom center ,red, green ,blue ,yellow);

        }

标识位

当未指定标识位时，颜色的渐变很均匀。一旦指定了标识位，就会发生突变。

未设置标识位：

单方设置了标识位：

background: linear-gradient(90deg, red 60%, blue);

双方设置了标识位：

background: linear-gradient(90deg, red 60%, blue 40%);

使用径向标识位绘制太阳

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>

        div{

            height: 300px;

            width: 300px;

            border: solid 1px #ddd;

            background: radial-gradient(red 10%,yellow 30%,black 70%)

        }

    </style>

    <title>Document</title>

</head>

<body>

    <div></div>

</body>

</html>

径像渐变绘制小太阳

中间点阈值

所谓中间点阈值，指的就是两个颜色渐变的时候，从哪个点开始让一个颜色渐变到另一个颜色。

比如这个示例，红色标识位为 60% ，蓝色标识位为 40% ，渐变的中间点阈值就只能变成0了。

再比如这个示例，单方设置了标识位，那么它的阈值就是由系统产生的，所以我们才能看见它渐变的效果。

怎么设置中间点阈值呢？看下面这段代码。

/* 0%就是中间点阈值，当设置为0后那么红色变蓝色会由0%的位置开始 */

background: linear-gradient(90deg, red ,0%, blue);

/* 我们的中间点阈值是20%，先是红色占了10%，那么可观测范围中中间点阈值也就只有10%了，所以上图的渐变区域为10% */

background: linear-gradient(90deg, red 10% ,20%, blue 80%);

线性渐变重复

要想使用线性渐变重复，请使用 repeating-linear-gradient 。

/* 一个格子为 75px */

background: repeating-linear-gradient(90deg, blue, 25px, red 50px);

如果我们想要生硬的颜色，我们还需要再随便加一个颜色充当过渡。

background: repeating-linear-gradient(90deg, blue, 25px, yellow 25px, 25px, red 50px);

径向渐变重复

要想使用线性渐变重复，请使用 repeating-radial-gradient 。

background: repeating-radial-gradient(20px 20px, red 0%, yellow 20%, blue 30%, green 50%);

如果你还对标识位，中间点有什么疑惑，那么可以仔细找一找代码中的规律。

正文

CSS背景处理