[CSS] css的background及多背景設置

時間 2020-05-09

原文原文鏈接

問題

首先是一個 div 塊裏須要一張背景，帶文本和圖案的那種，可是身爲容器的 div 是可以隨數據的改變而變化長度的，因此一張靜態圖片難免的會有拉伸和擠扁的狀態，尤爲是有圖案和文本的狀況下最爲明顯css

.bg {
        position: fixed;
        top: 0px;
        left: 0;
        width: 183px;
        height: 1106px;
        background: no-repeat center/183px 100% url("img/001.png");
      }

當數據不夠的時候就是一個扁扁的樣子css3

.bg {
        position: fixed;
        top: 0px;
        left: 0;
        width: 183px;
        height: 600px;
        background: no-repeat center/183px 100% url("img/001.png");
      }

這時候就是想辦法可以讓圖自適應且還能看的過去，因而就出現將頭部變形比較明顯的文字圖案和底部顏色漸變分紅，兩個簡單的解決方法。這樣頭部文字不動，顏色漸變進行拉伸就不那麼明顯了。因而分紅兩個 div，分別存放頭部和底部，可是總感受這方法有些繁瑣，看了看文檔發現 background 能夠設置多背景瀏覽器

//縮寫形式
      .bg {
        position: fixed;
        top: 0px;
        left: 0;
        width: 175px;
        height: 600px;
        background: no-repeat center 114px/175px calc(100% - 114px) url("img/002.png"), no-repeat center top/175px 114px url("img/003.png");
      }

//分寫形式
      .bg {
        position: fixed;
        top: 0px;
        left: 0;
        width: 175px;
        height: 600px;
        /* background: no-repeat center 114px/175px calc(100% - 114px) url("img/002.png"), no-repeat center top/175px 114px url("img/003.png"); */
        background: url("img/002.png"), url("img/003.png");
        background-repeat: no-repeat, no-repeat;
        background-position: center 114px, center top;
        background-size: 175px calc(100% - 114px), 175px 114px;
      }

IE8 及更早的瀏覽器版本不支持一個元素有多個背景圖片函數

background 語法

背景縮寫屬性能夠在一個聲明中設置全部的背景屬性url

能夠設置的屬性分別是：background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment,和 background-image 中間有些值缺乏一兩個，並無什麼問題spa

固然也能夠分開寫屬性，好比下列屬性，我的更喜歡分寫屬性code

background-color 指定要使用的背景顏色
background-position 指定背景圖像的位置
background-size 指定背景圖片的大小
background-repeat 指定如何重複背景圖像
background-origin 指定背景圖像的定位區域
background-clip 指定背景圖像的繪畫區域
background-attachment 設置背景圖像是否固定或者隨着頁面的其他部分滾動
background-image 指定要使用的一個或多個背景圖像

background-position

background-position 屬性設置背景圖像的起始位置blog

值	描述
left top center bottom right	若是僅指定一個關鍵字，其餘值將會是"center"
x% y%	第一個值是水平位置，第二個值是垂直。左上角是 0％0％。右下角是 100％100％。若是僅指定了一個值，其餘值將是 50％。默認值爲：0％0％
xpos ypos	第一個值是水平位置，第二個值是垂直。左上角是 0。單位能夠是像素（0px0px）或任何其餘 CSS 單位。若是僅指定了一個值，其餘值將是 50％。你能夠混合使用％和 positions
inherit	指定 background-position 屬性設置應該從父元素繼承