前端背景常用一文搞懂

最新推荐文章于 2024-07-30 16:49:30 发布

叶不休

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量111

点赞数

分类专栏：前端文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_58694594/article/details/127636108

版权

前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

背景颜色

background-color

英文单词
rgb（255,0,0）
rgba（255,0,0,0.5透明度）
16进制

<!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: 200px;
            height: 200px;
            background-color: yellow;
            background-color: rgb(255,0,0);
            background-color: rgba(255,0,0);
        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: rgba(0,0,0,0.5);
        }
        .box3{
            width: 500px;
            height: 500px;
            background-color: #ff0000;
        }
        /*
        背景颜色写法
        1. 英文单词
        2.rgb（255,0,0）
        3.rgba（255,0,0,0.5透明度）
        4.16进制
         */
    </style>
</head>
<body>
    <div>
        <div class="box1">
            大家好
            <div class="box2"></div>
            <div class="box3"></div>
        </div>
    </div>
</body>
</html>

背景图片定位上下左右移动

background-repeat

默认平铺
background-repeat: repeat-x;沿x轴平铺
background-repeat: repeat-y;沿轴平铺
background-repeat: no-repeat;不平铺

background-position

20px 20px
10% 10%
left center right top center bottom

调整背景图片大小

background-size

400px 400px
100% 100%
cover 覆盖。等比例放大图片，能放多大放多大，直到完全覆盖背景区域。
contain 留白。把图片放大到最大尺寸，但是图片要完整展示在背景中，多余部分留白。

背景固定和滚动

background-attachment：scroll;

默认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>Document</title>
    <style>
        .box{
            background-color: yellow;
            background-image: url(/image/1.jpg);
            background-repeat: no-repeat;
            height: 3000px;
            width: 300px;

            background-attachment: fixed;
            margin: 0 auto;
            /* 默认scroll
                  fixed  相对于整个窗口固定在左上角,不跟着背景走。 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

背景的复合性

背景复合写法：

1.属性中间用空格隔开

2.顺序可以换

3. 可以只取一个值，放到后边会覆盖前面的值

4.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>
        /* 背景复合写法：
        1.属性中间用空格隔开
        2.顺序可以换
        3. 可以只取一个值，放到后边会覆盖前面的值
        4.background-size只能单独使用*/
        .box1{
            width: 600px;
            height: 600px;
            /* background-color: yellow;
            background-image: url(/image/1.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-attachment: fixed; */
            background: yellow url(/image/1.jpg) no-repeat center fixed;
        }

        .box2{
            width: 400px;
            height: 400px;
            background-color: red;
            background: url(/image/1.jpg) no-repeat;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>