08-background详解

时间 2019-11-21
标签 background 详解繁體版
原文原文链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>咸鱼联盟</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 2000px;
        }
        .box{
            width: 500px;
            height: 300px;
            padding: 100px;
            border: 50px dotted blue;
            background-color: deeppink;
            background-image: url("img/1.jpg");
            background-repeat: no-repeat;
            background-size: 200px;
            background-origin: padding-box;
            background-attachment: fixed;
        }
        .box-two{
            width: 200px;
            height: 200px;
            border: 20px dotted blue;
            padding: 20px;
            background-color: green;
            background-clip: content-box;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box-two"></div>
    <!--
        background-image    插入一张图片
        background-repeat   设置背景的平铺方式 默认repeat
        background-position 控制背景图片的位置
            background-position-x
            left    和容器的左边对齐    0%
            right   和容器的右边对齐   100%
            center  在容器的中间       50%
            background-position-y
            top    和容器的上边对齐      0%
            bottom   和容器的下边对齐   100%
            center  在容器的中间        50%
            background-position     若是只有一个值,那第二个值默认center
        background-size     设置背景图片的大小
            只有1个值等比例缩放  有2个值竖直方向、水平方向相对于外边盒子大小(%)
            background-size: contain;   从左上角开始与原图等比例缩放直到触碰盒子边界(不会超出)
            background-size: cover;     从左上角开始与原图等比例缩放直到盒子占满(超出)
        background-clip:    设置背景颜色的绘制区域
            content-box padding-box border-box
        background-origin   设置背景图片的绘制区域
            content-box padding-box border-box
        background复合属性
            background:pink url('img/1.jpg') no repeat 100px 100px / 50% 50%;
            background-color background-image background-repeat
            background-position/background-size
    -->
</body>
</html>