Css的背景（背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定）

最新推荐文章于 2024-04-19 09:39:59 发布

黄丫丫07

最新推荐文章于 2024-04-19 09:39:59 发布

阅读量681

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_51495354/article/details/127789599

版权

通过css背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

背景颜色：

Background-color:#******；

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>背景颜色</title>

    <style>

        div {

            width: 200px;

            height: 200px;

            /* 透明 */

            /* background-color: transparent; */



            background-color: aquamarine;

        }

    </style>

</head>



<body>

    <div></div>

</body>



</html>

背景图片：background-image属性描述了元素的背景图像，实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）

background-image: url(../css第一天/images/sun.jpg);

参数值	作用
None	无背景图（默认的）
url	使用绝对或相对地址指定背景图像

背景平铺：如果需要在html页面上对背景图像进行平铺，可以使用background-repeat属性

background-repeat:repeat|no-repeat|repeat-x|repeat-y

参数值	作用
Repeat	背景图像在纵向和横向上平铺（默认的）
No-repeat	背景图像不平铺
Repeat-x	背景图片在横向上平铺
Repeat-y	背景图片在纵向平铺

背景图片位置：利用background-position属性可以改变图片在背景中的位置。

Background-position:x y;

参数代表的意思是：x坐标和y坐标。可以使用方位名词和精确单位

参数值	说明
Length	百分数\|由浮点数和单位标识符组成的长度值
Position	Top\|center\|bottom\|left\|center\|right 方位名词

参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一样。

如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>背景位置方位名词应用一</title>

    <style>

        h3 {

            width: 118px;

            height: 40px;



            font-size: 14px;

            font-weight: 400;

            line-height: 40px;

            background-image: url(../css第一天/images/but.png);

            background-repeat: no-repeat;

            background-position: left;

            text-indent: 1.5em;

        }

    </style>

</head>



<body>

    <h3>成长守护平台</h3>

</body>



</html>

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>背景位置-方位名词应用二</title>

    <style>

        body {

            background-image: url(../css第一天/images/here.png);

            background-repeat: no-repeat;

            background-position: center top;

        }

    </style>

</head>



<body>



</body>



</html>

参数是精确单位

1）如果参数值是精确坐标，那么第一个肯定是x坐标，第二个肯定是y坐标。

2）如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。

3）参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。

背景图像固定：（背景附着）

Background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

Background-attachment：scroll | fixed

参数	作用
Scroll（默认）	背景图像随对象内容滚动
Fixed	背景图像固定

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>背景图像固定</title>

    <style>

        body {

            background-image: url(../css第一天/images/here.png);

            background-repeat: no-repeat;

            background-position: center top;

            /* 把背景图像固定住 */

            background-attachment: fixed;

            color: white;

            font-size: 30px;

        }

    </style>

</head>



<body>

    <p>天王盖地虎，宝塔镇河妖</p>

    <p>天王盖地虎，宝塔镇河妖</p>

    <p>天王盖地虎，宝塔镇河妖</p>

    <p>天王盖地虎，宝塔镇河妖</p>

    <p>天王盖地虎，宝塔镇河妖</p>

    <p>天王盖地虎，宝塔镇河妖</p>

    <p>天王盖地虎，宝塔镇河妖</p>

    <p>天王盖地虎，宝塔镇河妖</p>

    <p>天王盖地虎，宝塔镇河妖</p>

    <p>天王盖地虎，宝塔镇河妖</p>

    <p>天王盖地虎，宝塔镇河妖</p>

    <p>天王盖地虎，宝塔镇河妖</p>



    <p>天王盖地虎，宝塔镇河妖</p>

    <p>天王盖地虎，宝塔镇河妖</p>



    <p>天王盖地虎，宝塔镇河妖</p>

    <p>天王盖地虎，宝塔镇河妖</p>



    <p>天王盖地虎，宝塔镇河妖</p>

    <p>天王盖地虎，宝塔镇河妖</p>

    <p>天王盖地虎，宝塔镇河妖</p>



</body>



</html>

背景复合写法：为了简化属性代码，可以将这些属性合并简写在background中。

没有特定的书写顺序，一般习惯原定顺序为：

Background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置；

background: black url(../css第一天/images/here.png) no-repeat fixed center top;

背景色半透明：

Background: rgba(0,0,0,0.3);

最后一个参数是alpha透明度，取值范围在0~1之间

我们习惯把0.3的0省略掉，写为background：rgba(0,0,0,.3);

背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

背景总结：

属性	作用	值
Background-color	背景颜色	预定义的颜色值、十六进制、RGB代码
Background-image	背景图片	url（图片路径）
Background-repeat	是否平铺	Repeat/no-repeat/repeat-x/repeat-y
Background-position	背景位置	Length/position 分别是x和y坐标
Background-attachment	背景附着	Scroll（滚动）/fixed（背景固定）
背景简写	书写更简单	背景颜色图片地址平铺滚动位置
背景色半透明	背景颜色半透明	Background：rgba（0，0，0，0.3）；必须为4个值