CSS-背景属性

尺寸属性

背景尺寸属性是 CSS3 中新增的一个属性, 专门用于设置背景图片大小，属性分别如下

属性名 作用
background-size 规定背景图像的尺寸 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景尺寸属性</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 800px;
            height: 500px;
            margin: 0 auto;
        }

        ul li {
            list-style: none;
            float: left;
            width: 200px;
            height: 200px;
            margin: 30px 30px;
            border: 1px solid #000;
            text-align: center;
            line-height: 200px;
        }

        ul li:nth-child(1) {
            background: url("images/dog.jpg") no-repeat;
        }

        ul li:nth-child(2) {
            background: url("images/dog.jpg") no-repeat;
            /*
            第一个参数: 宽度
            第二个参数: 高度
            */
            background-size: 200px 100px;
        }

        ul li:nth-child(3) {
            background: url("images/dog.jpg") no-repeat;
            /*
            第一个参数: 宽度
            第二个参数: 高度
            */
            background-size: 100% 80%;
        }

        ul li:nth-child(4) {
            background: url("images/dog.jpg") no-repeat;
            /*
            第一个参数: 宽度
            第二个参数: 高度
            */
            background-size: auto 100px;
        }

        ul li:nth-child(5) {
            background: url("images/dog.jpg") no-repeat;
            /*
            第一个参数: 宽度
            第二个参数: 高度
            */
            background-size: 100px auto;
        }

        ul li:nth-child(6) {
            background: url("images/dog.jpg") no-repeat;
            /*
            cover含义:
            1.告诉系统图片需要等比拉伸
            2.告诉系统图片需要拉伸到宽度和高度都填满元素
            */
            background-size: cover;
        }

        ul li:nth-child(7) {
            background: url("images/dog.jpg") no-repeat;
            /*
            contain含义:
            1.告诉系统图片需要等比拉伸
            2.告诉系统图片需要拉伸到宽度或高度都填满元素
            3.图片保持比例放大或缩小填充容器，若不能完整填充容器，X轴或Y轴都有可能出现白边，图片不变形
            */
            background-size: contain;
        }
    </style>
</head>
<body>
<ul>
    <li>默认</li>
    <li>具体像素</li>
    <li>百分比</li>
    <li>宽度等比拉伸</li>
    <li>高度等比拉伸</li>
    <li>cover</li>
    <li>contain</li>
</ul>
</body>
</html>

图片定位区域属性

属性名 作用
background-origin 告诉系统背景图片从什么区域开始显示, 默认情况下就是从 padding 区域开始显示 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片定位区域属性</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
            float: left;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 20px dashed #000;
            padding: 50px;
            margin-left: 20px;
            background: url("images/dog.jpg") no-repeat;
        }

        ul li:nth-child(2) {
            background-origin: padding-box;
        }

        ul li:nth-child(3) {
            background-origin: border-box;
        }

        ul li:nth-child(4) {
            background-origin: content-box;
        }
    </style>
</head>
<body>
<ul>
    <li>默认</li>
    <li>padding</li>
    <li>border</li>
    <li>content</li>
</ul>
</body>
</html>

绘制区域属性

背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从 border 区域开始绘制背景

属性名 作用
background-clip 指定绘图区的背景 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景绘制区域属性</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
            float: left;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 20px dashed #000;
            padding: 50px;
            margin-left: 20px;
            background: red url("images/dog.jpg") no-repeat;
        }

        ul li:nth-child(2) {
            background-clip: padding-box;
        }

        ul li:nth-child(3) {
            background-clip: border-box;
        }

        ul li:nth-child(4) {
            background-clip: content-box;
        }
    </style>
</head>
<body>
<ul>
    <li>默认</li>
    <li>padding</li>
    <li>border</li>
    <li>content</li>
</ul>
</body>
</html>

多重背景图片

多张背景图片之间用逗号隔开即可

注意点

  • 先添加的背景图片会盖住后添加的背景图片
  • 建议在编写多重背景时拆开编写
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多重背景图片</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 0 auto;
            /*
            background: url("images/animal1.png") no-repeat left top, url("images/animal2.png") no-repeat right top, url("images/animal3.png") no-repeat left bottom, url("images/animal4.png") no-repeat right bottom, url("images/animal5.png") no-repeat center center;
            */
            background-image: url("images/animal1.png"), url("images/animal2.png"), url("images/animal3.png");
            background-repeat: no-repeat, no-repeat, no-repeat;
            background-position: left top, right top, left bottom;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

posted @ 2021-03-19 10:06  BNTang  阅读(0)  评论(0)    收藏  举报