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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。