CSS背景樣式：background屬性

2021年12月23日技術服務網頁設計 css1936

背景樣式主要包括背景顏色和背景圖像。

1.background-color 設置元素的背景顏色。
background-color：顏色/transparent
說明：transparent是全透明
顏色值（顏色名/RGB/十六進制）
背景區(qū)包括內容、內邊距（padding）和邊框（border）、不包含外邊距（margin）

2.background-image 設置元素的背景圖片。
background-image：url(圖片地址)/none
說明：url地址可以是相對地址也可以是絕對地址
元素的背景占據(jù)了元素的全部尺寸，包括內邊距和邊框，但不包括外邊距
默認地，背景圖像位于元素的左上角，并在水平和垂直方向上重復。
當即設置了背景圖片又設置了背景顏色時，背景圖片會覆蓋背景顏色

3.background-position 設置背景圖片的起始位置

A. 這個屬性只能應用于塊元素和替換元素，替換元素包括img、input、textarea、select和object。
B. 該屬性值可以設置為關鍵字，也可以設置為兩個像素值（”20px 30px“），設置為關鍵字時表示背景圖像相對于元素的左上角的距離（分別是水平距離和垂直距離）。
C. 該屬性值可取的關鍵字為：
top left：左上（表示圖像位于元素的左上角，下面的類似）
top center：靠上居中
top right：右上
left center：靠左居中
center center：正中
right center：靠右居中
bottom left：左下
bottom center：靠下居中
bottom right：右下

4.background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動
background-attachment：scroll/fixed
scroll：默認值，隨著圖片的滾動而滾動
fixed：當頁面的其余部分滾動時，背景圖片不會移動

5.background-repeat 設置背景圖像是否重復及如何重復
該屬性可以取如下值：
??????? no-repeat：不平鋪
??????? repeat：在水平方向（x軸）和垂直方向（y軸）同時平鋪，默認值
??????? repeat-x：在水平方向（x軸）平鋪
??????? repeat-y：在垂直方向（y軸）平鋪

6.background 簡寫屬性，作用是將背景屬性設置在一個聲明中。
background：[background-color] [background-image] [background-repeat] [background-attachment] [background-position]
說明：各值之間用空格分割，不分先后順序

示例代碼

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>背景屬性</title>
    <style>
        body{
            height: 1000px;
            /*背景顏色   默認為透明  transparent*/
            background-color: red;
            /*background-color: #ff0000;*/
            /*background-color: rgb(255,0,0);*/
            /*background-color: rgba(255,0,0,.5);*/
            
            /*背景圖片 默認水平垂直平鋪*/
            /*background-image: url("images/pic2.jpeg");*/

            /*背景圖片平鋪*/
            /*background-repeat: no-repeat;*/
            /*background-repeat: repeat-x;*/
            /*background-repeat: repeat-y;*/

            /*背景圖片的大小*/
            /*background-size:1000px ;*/
            /*background-size: 100% 100%;*/

            /*背景圖片固定*/
            /*background-attachment:fixed ;*/

            background:red  url("images/pic2.jpeg") no-repeat fixed ;
            background-size: 100% 100%;
        }
        .box{
            width: 800px;
            height: 600px;
            /*background-color: rgba(255,255,255,.5);
            background-image: url("images/pic1.jpg");
            background-repeat: no-repeat;*/
            /*background-size: contain;*/

            background: rgba(255,255,255,.5) url("images/pic1.jpg") no-repeat;


            /*背景圖片定位*/
            /*background-position: x y;*/
            /*當只有水平方向，垂直方向默認居中*/
            /*background-position: 30px 30px;*/
            /*background-position: 30px;*/
            /*background-position: right bottom;*/
            /*background-position: center;*/


            /*簡寫為*/
            /*background：顏色 圖片 平鋪 大小  定位 固定;*/
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

上一篇: CSS3幾句代碼實現(xiàn)網站變黑白色下一篇: 網站SEO優(yōu)化的原理與優(yōu)勢