CSS3 背景属性

最新推荐文章于 2024-08-22 16:10:15 发布

苦涩2020

最新推荐文章于 2024-08-22 16:10:15 发布

阅读量182

点赞数 2

分类专栏： CSS3 前端文章标签： css3

本文链接：https://blog.csdn.net/UserPython/article/details/106093178

版权

前端同时被 2 个专栏收录

80 篇文章 1 订阅

订阅专栏

CSS3

20 篇文章 0 订阅

订阅专栏

背景属性

背景颜色
背景图片
背景重复
背景尺寸
背景定位
背景固定
背景简写

背景颜色

background-color:合法的颜色值
合法的颜色值：颜色名、16进制颜色值、rgb颜色值、rgba颜色值
如果没有设置背景颜色，那么背景就是透明。默认值：transparent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景颜色</title>
    <style type="text/css">
        div{
            background-color: rgb(0, 255, 0);
            width: 300px; height: 90px;
            line-height: 90px;
        }
    </style>
</head>
<body>
    <div>背景颜色</div>
</body>
</html>

背景图片

background-image:url(图片路径)
图片路径：相对路径、绝对路径
默认值：none；表示没有背景图片
背景颜色和背景图片可以同时设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片</title>
    <style type="text/css">
        div{
            width: 225px; height: 225px; line-height: 225px;
            background-image: url(./头像.png);
            background-color: red;
        }
    </style>
</head>
<body>
    <div>背景图片</div>
</body>
</html>

背景重复

background-repeat:repeat | no-repeat | repeat-x | repeat-y
repeat：默认值，表示重复
no-repeat：表示不重复
repeat-x：x轴方向重复
repeat-y：y轴方向重复

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景重复</title>
    <style type="text/css">
        body{
            background-image: url(./头像.png);
            /* background-repeat: repeat; */
            /* background-repeat: no-repeat; */
            background-repeat: repeat-x;
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
</body>
</html>

背景尺寸

background-size:宽度高度
尺寸单位：背景图片的宽度和高度就是一个固定的值
%：以父元素的百分比来设置背景图片的宽度和高度
contain：把背景图片扩展至最大尺寸，使宽度或高度完全适应内容区域，保持原来的宽高比例
cover：把背景图片扩展至覆盖全部区域。背景图片的某些部分无法显示在元素区域中
当只设置一个值时，第二个值是auto。图片不会变形，会保持原来的宽高比例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景尺寸</title>
    <style type="text/css">
        div{
            width: 50%; height: 500px;
            background-color:green;
            background-image: url(./头像.png);
            background-repeat: no-repeat;
            /* background-size: 500px 500px; */
            /* background-size: 100% 100%; */
            /* background-size: contain; */
            background-size: cover;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景定位

background-position:X(水平位置) Y(垂直位置)
方向定位：top上、bottom下、right右、left左、center中
当只设置一个值时，另一个值就是center（表示居中）
尺寸单位定位：参考位置是背景图片左上角与元素左上角水平垂直距离
%定位：0% 0%图片在左上角，100% 100%图片在右下角，如果只设一个值，另一个值就是center（表示居中）
背景定位可以使用负值，方向与正值相反

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景定位</title>
    <style type="text/css">
        div{
            width: 800px; height: 700px;
            background-color: greenyellow;
            background-image: url(头像.png);
            background-repeat: no-repeat;
            /* background-position: right bottom; */
            background-position: 100% 100%;
            /* background-position: 50px 100px; */
        }
    </style>
</head>
<body>  
    <div></div>
</body>
</html>

背景固定

background-attachment:scroll | fixed
设置背景图片是否随页面滚动
scroll：默认值，表示背景图片会随页面滚动而移动
fixed：表示背景图片不会随页面滚动而移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景固定</title>
    <style type="text/css">
        div{
            width: 70px;
            background-image: url(头像.png);
            background-repeat: no-repeat;
            /* background-attachment: scroll; */
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div>背景固定背景固定背景固定背景固定背景固定背景固定背景固定
        背景固定背景固定背景固定背景固定背景固定背景固定背景固定背景固定
        背景固定背景固定背景固定背景固定背景固定背景固定背景固定背景固定
        背景固定背景固定背景固定背景固定背景固定背景固定背景固定背景固定
        背景固定背景固定背景固定背景固定背景固定背景固定背景固定背景固定
        背景固定背景固定背景固定背景固定背景固定背景固定背景固定背景固定
        背景固定背景固定背景固定背景固定背景固定背景固定背景固定背景固定
        背景固定背景固定背景固定背景固定背景固定背景固定背景固定背景固定
    </div>
</body>
</html>

背景简写

background:颜色值背景图片背景重复背景定位/背景尺寸背景固定
可以在一个属性中设置所有背景属性，用空格隔开
如果某个值不写，也不会出问题
使用背景简写，输入的代码最少，并且浏览器对背景简写支持度更高
设置属性无顺序要求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景简写</title>
    <style type="text/css">
        div{
            width: 400px; height: 1400px;
            /* background-color: #00ff00;
            background-image: url(头像.png);
            background-repeat: no-repeat;
            background-size: 100px 100px;
            background-position: 120px 20px;
            background-attachment: fixed; */

            background: #00ff00 url(头像.png) no-repeat  120px 20px/100px 100px fixed;
        }
    </style>
</head>
<body>
    <div>背景简写</div>
</body>
</html>