css中設置background屬性

時間 2019-11-21

原文原文鏈接

屬性解釋
background屬性是css中應用比較多，且比較重要的一個屬性，它是負責給盒子設置背景圖片和背景顏色的，background是一個複合屬性，它能夠分解成以下幾個設置項：css

background-color 設置背景顏色
background-image 設置背景圖片地址
background-repeat 設置背景圖片如何重複平鋪
background-position 設置背景圖片的位置
background-attachment 設置背景圖片是固定仍是隨着頁面滾動條滾動

實際應用中，咱們能夠用background屬性將上面全部的設置項放在一塊兒，並且也建議這麼作，這樣作性能更高，並且兼容性更好，好比：「background: #00FF00 url(bgimage.gif) no-repeat left center fixed」，這裏面的「#00ff00」是設置background-color；「url(bgimage.gif)」是設置background-image；「no-repeat」是設置background-repeat；「left center」是設置background-position；「fixed」是設置background-attachment，各個設置項用空格隔開，有的設置項不寫也是能夠的，它會使用默認值。html

舉例：
下面這些例子使用下面這張圖片作爲背景圖：
性能

一、「background:url(bg.jpg)」，默認設置一個圖片地址，圖片會從盒子的左上角開始將盒子鋪滿。url

二、「background:cyan url(bg.jpg) repeat-x」，橫向平鋪盒子，盒子其餘部分顯示背景顏色「cyan」。3d

三、「background:cyan url(bg.jpg) repeat-y」，縱向平鋪盒子，盒子其餘部分顯示背景顏色「cyan」。code

四、「background:cyan url(bg.jpg) no-repeat」，背景不重複，背景和盒子左上角對齊，盒子其餘部分顯示背景顏色「cyan」。htm

五、「background:cyan url(bg.jpg) no-repeat left center」，背景不重複，背景和盒子左中對齊，盒子其餘部分顯示背景顏色「cyan」。blog

六、「background:cyan url(bg.jpg) no-repeat right center」，背景不重複，背景和盒子右中對齊，也就是背景圖片的右邊對齊盒子的右邊，盒子其餘部分顯示背景顏色「cyan」。圖片

相關代碼：it

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test background</title>
    <style type="text/css">
        .backshow{
            width:320px;
            height:160px;
            border:3px solid #333;
            float:left;
            margin:10px;            
        }
        .bg1{background:cyan url(bg.jpg);}
        .bg2{background:cyan url(bg.jpg) repeat-x;}
        .bg3{background:cyan url(bg.jpg) repeat-y;}
        .bg4{background:cyan url(bg.jpg) no-repeat;}
        .bg5{background:cyan url(bg.jpg) no-repeat left center;}
        .bg6{background:cyan url(bg.jpg) no-repeat right center;}
    </style>
</head>
<body>
    <div class="backshow bg1"></div>
    <div class="backshow bg2"></div>
    <div class="backshow bg3"></div>
    <div class="backshow bg4"></div>
    <div class="backshow bg5"></div>
    <div class="backshow bg6"></div>
</body>
</html>

例子說明：
代碼中使用到的背景圖片，能夠直接在頁面上的背景圖片上點右鍵另存下來，命名爲：「bg.jpg」，而且和網頁文件存在同一個目錄下。

關於背景圖片的background-position的設置，設置背景圖片水平位置的有「left」、「center」、「right」，設置背景圖片垂直位置的有「top」、「center」、「bottom」，水平和垂直的屬性值兩兩組合，就能夠把背景圖設置到對齊盒子的四個角或者四個邊的中心或者盒子的正中心位置。還能夠設置具體的像素值來把背景圖片精確地定位到盒子的某個位置，特別是對於背景圖片尺寸大於盒子尺寸的這種狀況，咱們能夠用數值定位，截取大圖片的某一塊作爲盒子的背景。

好比說，咱們想把下邊的盒子用右邊的圖片做爲背景，而且讓背景顯示圖片中靠近底部的那朵花：

用上面中間那張圖片做爲左邊那個比它尺寸小的盒子的背景，若是不設置background-position，默認背景圖的左上角會和盒子的左上角對齊，若是設置，能夠用兩個數值定位背景圖，上面右邊的實現效果設置爲：「background:url(location_bg.jpg) -110px -150px」，第一個數值表示背景圖相對於本身的左上角向左偏移110px，負值向左，正值向右，第二個數值表示背景圖相對於本身的左上角向上偏移150px，負值向上，正值向下。

實現原理示意圖：

對應代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test background</title>
    <style type="text/css">
        .backshow{
            width:320px;
            height:160px;
            border:3px solid #333;
            float:left;
            margin:10px;            
        }        
        .bg{width:94px;
            height:94px;
            border:3px solid #666;
            background:url(location_bg.jpg) -110px -150px;
        }
    </style>
</head>
<body>
    <div class="bg"></div>
</body>

</html>

1. CSS background 屬性
2. css background 屬性
3. CSS background屬性
4. css的background屬性
5. CSS background-clip 屬性
6. CSS background-clip屬性
7. background-image屬性的設置
8. html中background-image屬性的設置
9. CSS 屬性篇(六)：background-size屬性
10. CSS 背景位置 background-position屬性
更多相關文章...
• MySQL AS：設置別名 - MySQL教程
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• IntelliJ IDEA代碼格式化設置
• JDK13 GA發佈：5大特性解讀

相關標籤/搜索

每日一句

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