CSS背景处理

背景样式

背景颜色

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

image-20200713135614383

<!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>是不同的。

image-20200713141512407

<!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 内容区域

image-20200713140710953

<!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

image-20200713140920550

  指定为no-repeat

image-20200713141216547

<!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 背景固定

image-20200713144036413

image-20200713144119494

<!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为居中。

image-20200713144918833

<!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来设置背景尺寸,单位可以是单词,%pxem以及rem

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

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

  指定数值定义宽高尺寸

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

  宽度固定高度自动(这个常用)

background-size: 50% auto;

image-20200713145456046

<!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;

image-20200713151123579

多个背景

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

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

背景阴影

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

image-20200713151716219

<!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(方向, 颜色, 颜色, ...);

image-20200713151947910

/* 红色到绿色,可以看到是线性的渐变 */
background: linear-gradient(red, green);

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

image-20200713152120307

/* 倾斜30°,红色到绿色 */
background: linear-gradient(30deg, red, green);

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

image-20200713152512469

/* 向右渐变 ,红色到绿色 */
background: linear-gradient(to right, red, green)

image-20200713153116256

/* 向左渐变 ,红色到绿色 */
background: linear-gradient(to left, red, green)

image-20200713153413520

/* 向左上渐变 ,红色到绿色 */
background: linear-gradient(to left top, red, green)

image-20200713153553241

/* 向右下渐变 ,红色到绿色 */
background: linear-gradient(to right bottom, red, green)

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

image-20200713153719825

/* 向右渐变 ,红色到绿色到蓝色到黄色 */
background: linear-gradient(to right, red, green, blue, yellow)

径向渐变

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

image-20200713154136972

/* 红色到绿色,可以看到是径向的渐变 */
background: radial-gradient(red, green);

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

image-20200713154320317

/* 红色到绿色,设置宽度 */
background: radial-gradient(50px 50px,red, green);

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

image-20200713155000684

/* 红色到绿色,渐变方向为右上,由于设置了宽度,效果并不美观。*/
background: radial-gradient(at right top ,red 200px, green 20px);

image-20200713155054506

/* 红色到绿色,渐变方向为左下,由于设置了宽度,效果并不美观。*/
background: radial-gradient(at left bottom ,red 200px, green 20px);

image-20200713155147379

/* 红色到绿色,渐变方向为左侧向中心,由于设置了宽度,效果并不美观。*/
background: radial-gradient(at left center ,red 200px, green 20px);

image-20200713155412541

/* 红色到绿色,渐变方向为底部向中心,由于未设置宽度,效果好一些了*/
background: radial-gradient(at bottom center ,red, green);
        }

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

image-20200713155711498

/* 红色到绿色到蓝色到黄色,渐变方向为底部向中心,由于未设置宽度,效果好一些了*/
background: radial-gradient(at bottom center ,red, green ,blue ,yellow);
        }

标识位

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

  未设置标识位:

image-20200713160044568

  单方设置了标识位:

image-20200713160247150

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

  双方设置了标识位:

image-20200713160159189

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

  使用径向标识位绘制太阳

image-20200713160522794

<!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了。

image-20200713160159189

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

image-20200713160247150

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

image-20200713162235377

/* 0%就是中间点阈值,当设置为0后那么红色变蓝色会由0%的位置开始 */
background: linear-gradient(90deg, red ,0%, blue);

image-20200713162650600

/* 我们的中间点阈值是20%,先是红色占了10%,那么可观测范围中中间点阈值也就只有10%了,所以上图的渐变区域为10% */
background: linear-gradient(90deg, red 10% ,20%, blue 80%);

线性渐变重复

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

image-20200713163323965

/* 一个格子为 75px */
background: repeating-linear-gradient(90deg, blue, 25px, red 50px);

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

image-20200713163235392

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

径向渐变重复

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

image-20200713163938374

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

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

posted @ 2020-07-13 19:38  云崖先生  阅读(98)  评论(0编辑  收藏