CSS背景属性详解及应用示例-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43841844/article/details/122277946

背景属性

个数	属性	描述	说明
1	background-color	背景颜色	background-color : red;
2	background-image	背景图片	background-image : url();
3	background-repeat	背景图片的平铺	background-repeat: no-repeat/ repeat/ repeat-x/ repeat-y ;
4	background-position	背景图片的定位	background-position: 水平位置垂直位置可以给负值
5	background-attachment	背景图片的固定	background- scroll（滚动）/ fixed （固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了）；

可以简写成background

background-image: 默认平铺效果

代码示例：

<!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>Document</title>
    <style>
        .box1{
            width: 400px;
            height: 400px;
            background-color: yellow;
            background-image: url(../img/feiman.jpg);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

background-repeat

repeat: 默认平铺
repeat-x ：x轴平铺
repeat-y ：y轴平铺
no-repeat：不平铺

background-position

数字表示

background-position: 20px 20px;

百分比表示：

background-position: 10% 10%;

以下第一排与第二排两两组合

left center right
top center bottom

background-attachment

用该属性可以实现视差效果。
示例代码：

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 1000px;
            background-color: yellow;
            margin: 0,auto;
        }
        body{
            background-image: url(../img/zhihu.png);
            background-attachment:fixed;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

背景的复合属性

复合写法：

用空格隔开
顺序可以换
可以只取一个值，放在后面能覆盖前面的值

background-size属性只能单独用

示例代码：

<!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>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            /* background-color: yellow;
            background-image: url(../img/zhihu.png);
            background-repeat: no-repeat;
            background-position: center; */
            background: yellow url(../img/zhihu.png) no-repeat center;
        }

        .box2{
            width: 300px;
            height: 300px;
            background-color: yellow;
            background: url(../img/zhihu.png) no-repeat;
        }
    </style>
</head>
<body>
    <div class="box1"></div>

    <div class="box2"></div>
</body>
</html>