CSS常見樣式（一）：background

時間 2019-12-08

標籤 css 常見樣式 background 欄目 CSS 简体版

原文原文鏈接

跟着視頻將 HTML 和 CSS （不包括 HTML5 和 CSS3）所有粗略學習了一遍以後，感受有必要再系統性地進行一下複習和總結。第一篇文章將會以一個小 demo 來總結一下 background 的用法。css

Demo: Button

demo以下（涉及到本地圖片，所以預覽效果有問題）：
https://jsfiddle.net/ChasonZhang/185mmr99/
效果以下：
html

按鈕來源（亞馬遜（Amazon）的按鈕樣式）：

segmentfault

看了上面按鈕樣式以後，我想到的解決方案有以下幾種：佈局

最簡單：直接使用不帶文字的圖片做爲按鈕的背景樣式，缺點在於針對不一樣的按鈕寬度（如上圖登陸按鈕和購買按鈕）須要設計師進行重複的繪製，增長了額外的工做量，且缺少重用性。學習

最完美：使用CSS進行繪製： linear-gradient 和 border-radius ，缺少在於部分低版本IE（具體哪一個版本待查證，印象中是 IE8 及如下）不兼容 border-radius。url

最兼容：將使用圖片和CSS繪製結合在一塊兒。spa

background 屬性在第3種方法中獲得了充分的利用。.net

background

下圖是 w3c 上關於 background 的屬性清單：
設計

通過簡單的試驗，能夠得出如下幾條結論：code

背景圖片默認以原尺寸填充，填充範圍包括盒模型的 padding 和 content 區域；
背景圖片默認以左上角爲原始位置(0, 0)，默認按照從左到右、從上到下的順序**重複填充**，直到填充滿整個填充範圍；
background-image 能夠設置 background-size (CSS3) 的值， background-color 不能夠；感興趣的話另外兩個 CSS3 新屬性也能夠研究一下，不過兼容性都須要 IE9 及以上。
縮寫形式： background: color image position/size repeat origin clip attachment initial|inherit; ，注意 / 的使用；
background 也有層級關係。
blackground 不影響盒模型的寬高，不屬於盒模型的內容（content）。以前的浮動與清浮動系列文章裏提到過，塊元素佔滿整行，高度由內容撐開。也就是說，在 div 裏輸入幾行文字，div 就有多高；可是若是 div 爲空（除了背景圖沒有其餘文字等內容），那麼背景圖就不會顯出來。做爲初學者曾經跳進過的坑，這一點仍是要注意的，插入純背景圖須要對塊級元素設置寬高。可是，若是在 div 中插入 img 元素，那這就徹底不是一回事，雖然渲染效果可能如出一轍。

以上幾點，是對 background 基本知識的總結，做爲初學者，我覺得掌握到這種程度基本上算合格了。

樣式說明：Styling

樣式代碼以下：

<style type="text/css">
body { margin: 0;}
.btn { margin: 20px auto; width: 135px; height: 31px;
    background-image: url(img/btn.jpg);
    background-repeat: repeat-x;
}
.btnL {
    height: 31px;
    background-image: url(img/btnL.jpg);
    background-repeat: no-repeat;
}
.btnR {
    height: 31px;
    background-image: url(img/btnR.jpg);
    background-repeat: no-repeat;
    background-position: right;
    line-height: 31px;
    text-align: center;
    font-size: 14px;
}
</style>

整個樣式的思路是：

將按鈕分爲兩部分：文字+背景。文字屬於 html 裏的內容，css主要設計的是樣式。
將背景拆分爲三部分，豎直着切三刀，左右分別是帶兩個圓角的小矩形，中間是一段橫長的矩形。
將中間部分繼續豎起切，切成一條條1像素寬的矩形，而後須要多寬的矩形，就用多少條1px矩形。打個簡單的比方，就是先微分，再積分。

在這個例子中，使用 background 屬性時，須要注意給全部塊級元素設置寬，寬只須要 .btn 設置一次就能夠。

佈局說明：Coding

代碼以下，基本的三層嵌套佈局。

<body>
<div class="btn">
    <div class="btnL">
        <div class="btnR">加入購物車</div>
    </div>    
</div>
</body>

知其因此然
在構造這個佈局的時候，有一個問題須要明白：
爲何 .btnR 須要放在 .btnL 裏面？
.btnL 放在 .btn 裏面能夠理解，可是 .btnL 和 .btnR 不是並列關係嗎？假設 .btnR 不放在 .btnL 裏面，而是與之並列，會出現按鈕背景兩邊圓角部分錯位排列的效果，緣由在於兩個塊級元素都有寬高，會分別佔據一行。