背景相关属性

背景颜色

属性名:background-color(bgc)
属性值:颜色取值:关键字、rgb表示法、rgba表示法、十六进制……

<!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>
.a{
    width: 200px;
    height: 200px;
    background-color: lightblue;

}
.b{
    width: 30px;
    height: 30px;
    background-color: lightcoral;
}
    </style>
</head>
<body>
    <div class="a"><div class="b"></div></div>
</body>
</html>
enter description here

背景图片

属性名:background-image(bgi)
background-image: url()

<!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: 500px;
    height: 500px;
    background-image: url(https://photo.z4k.top/images/2021/09/29/1f635a58090e608cca941817ab6ad7be.png);
}

    </style>
</head>
<body>
<div></div>
</body>
</html>
enter description here

背景平铺

属性名:background-repeat(bgr)

  • 属性值
取值效果
repeat(默认值)水平和垂直方向都平铺
no-repeat不平铺
repeat-x沿着水平方向(x轴)平铺
repeat-y

使用方式:

首先呢,先给background-image:url()设置图片之后再给background-repeat:repead设置盒子内平铺

<!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: 500px;
    height: 500px;
    background-image: url(https://photo.z4k.top/images/2021/09/26/878ad99bf16b82ce9a84207d6f0c4f4d.gif);
    background-repeat: repeat;
}

    </style>
</head>  
<body>
<div></div>
</body>
</html>
enter description here

背景位置

属性名:background-position(bgp)

enter description here

背景相关属性连写

<!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.b{
            width: 500px;
            height: 500px;
            background: url(https://photo.z4k.top/images/2021/09/29/4468c6a407171f644f5d06cc203ff1ae.png) no-repeat;
        }


    </style>
</head>
<body>
        <div class="b"></div>
</span>
</body>
</html>
enter description here
© 版权声明
THE END
喜欢就支持一下吧
点赞8赞赏 分享
评论 抢沙发

请登录后发表评论