css經常使用樣式背景background如何使用

時間 2020-03-07

原文原文鏈接

css背景background屬性經常使用於定義HTML的背景，background簡寫屬性做用是將背景屬性設置在一個聲明中，background背景屬性常見爲如下這些：.background-color表明背景顏色 .background-image表明背景圖像 .background-repeat 表明背景圖像水平或者垂直平鋪 .background-attachment表明背景圖像是否固定或者隨着頁面的其他部分滾動 .background-position表明設置背景圖像的起始位置在這些背景效果中background-color屬性定義了元素的背景顏色,顏色值一般以如下方式定義:十六進制 - 如："#ff0000" RGB - 如："rgb(255,0,0)"顏色名稱 - 如："red" 具體用下面的代碼展現說明下：css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS背景background</title>
    <style type="text/css">
    /*background-color:定義元素背景色*/
    div{
        /*顏色值一般以如下方式定義:十六進制 - 如："#ff0000" RGB - 如："rgb(255,0,0)"顏色名稱 - 如："red"*/
        color: #f90;
        color: rgb(red, green, blue);
        color: royalblue;
        color: rgb(255,255,255);
        background-color: blueviolet;
    }
    /*background-image:定義元素背景圖像*/
    body{
        background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");
    }
    /*background-repeat:表明背景圖像水平或者垂直平鋪*/
    body{
        background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");
        background-repeat: repeat-x;/*圖像水平平鋪*/
        background-repeat: repeat-Y;/*圖像垂直平鋪*/
        background-repeat: no-repeat;/*圖像拒絕平鋪*/
    }
    /*background-position表明設置背景圖像的起始位置*/
    /* 提示：爲 background-position 屬性提供值有不少方法。首先，
能夠使用一些關鍵字：top、bottom、left、right 和 center；其次，能夠使用長度值，如 100px 或 5cm；最後也能夠使用百分數值。不一樣類型的值對於背景圖像的放置稍有差別。 */
    body{
        background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");
        background-position:left top;
    }

    /* background-attachment表明背景圖像是否固定或者隨着頁面的其他部分滾動 */
    body{
        background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");
        background-repeat: no-repeat;
        background-position:800px 1000px;/*圖像將在元素內邊距向右移動800px，向下移動1000px*/
        background-attachment: fixed;
    }
    /* background背景簡寫 */
    /* div{
        background: color image repeat attachment position;
    } */
    </style>
</head>
<body>
    <div>如何在頁面滾動齒輪的時候實現背景圖不動，選擇 background-attachmn:fixed</div>
    <!-- 100個換行符 br*100敲下enter鍵 -->
</body>
</html>