資訊專欄INFORMATION COLUMN
摘要：最兼容將使用圖片和繪制結(jié)合在一起?？s寫形式，注意的使用也有層級(jí)關(guān)系。文字屬于里的內(nèi)容，主要設(shè)計(jì)的是樣式。小結(jié)隨著的發(fā)展，如今這個(gè)小并不是解決類似樣式的最佳方式了，但是里面蘊(yùn)含著滑動(dòng)門的原理前幾年非常流行的一種方法，參考傳智播客的導(dǎo)航欄。
跟著視頻將 HTML 和 CSS （不包括 HTML5 和 CSS3）全部粗略學(xué)習(xí)了一遍之后，感覺有必要再系統(tǒng)性地進(jìn)行一下復(fù)習(xí)和總結(jié)。第一篇文章將會(huì)以一個(gè)小 demo 來總結(jié)一下 background 的用法。
Demo: Buttondemo如下（涉及到本地圖片，因此預(yù)覽效果有問題）：
https://jsfiddle.net/ChasonZhang/185mmr99/
效果如下：
按鈕來源（亞馬遜（Amazon）的按鈕樣式）：
看了上面按鈕樣式之后，我想到的解決方案有如下幾種：
background最簡(jiǎn)單：直接使用不帶文字的圖片作為按鈕的背景樣式，缺點(diǎn)在于針對(duì)不同的按鈕寬度（如上圖登錄按鈕和購(gòu)買按鈕）需要設(shè)計(jì)師進(jìn)行重復(fù)的繪制，增加了額外的工作量，且缺乏重用性。
最完美：使用CSS進(jìn)行繪制： linear-gradient 和 border-radius ，缺乏在于部分低版本IE（具體哪個(gè)版本待查證，印象中是 IE8 及以下）不兼容 border-radius。
最兼容：將使用圖片和CSS繪制結(jié)合在一起。
background 屬性在第3種方法中得到了充分的利用。
下圖是 w3c 上關(guān)于 background 的屬性清單：
經(jīng)過簡(jiǎn)單的試驗(yàn)，可以得出以下幾條結(jié)論：
背景圖片默認(rèn)以原尺寸填充，填充范圍包括盒模型的 padding 和 content 區(qū)域；
背景圖片默認(rèn)以左上角為原始位置(0, 0)，默認(rèn)按照從左到右、從上到下的順序**重復(fù)填充**，直到填充滿整個(gè)填充范圍；
background-image 可以設(shè)置 background-size (CSS3) 的值， background-color 不可以；感興趣的話另外兩個(gè) CSS3 新屬性也可以研究一下，不過兼容性都需要 IE9 及以上。
縮寫形式： background: color image position/size repeat origin clip attachment initial|inherit; ，注意 / 的使用；
background 也有層級(jí)關(guān)系。
blackground 不影響盒模型的寬高，不屬于盒模型的內(nèi)容（content）。之前的浮動(dòng)與清浮動(dòng)系列文章里提到過，塊元素占滿整行，高度由內(nèi)容撐開。也就是說，在 div 里輸入幾行文字，div 就有多高；但是如果 div 為空（除了背景圖沒有其他文字等內(nèi)容），那么背景圖就不會(huì)顯出來。作為初學(xué)者曾經(jīng)跳進(jìn)過的坑，這一點(diǎn)還是要注意的，插入純背景圖需要對(duì)塊級(jí)元素設(shè)置寬高。但是，如果在 div 中插入 img 元素，那這就完全不是一回事，雖然渲染效果可能一模一樣。
以上幾點(diǎn)，是對(duì) background 基本知識(shí)的總結(jié)，作為初學(xué)者，我以為掌握到這種程度基本上算合格了。
樣式說明：Styling樣式代碼如下：
整個(gè)樣式的思路是：
將按鈕分為兩部分：文字+背景。文字屬于 html 里的內(nèi)容，css主要設(shè)計(jì)的是樣式。
將背景拆分為三部分，豎直著切三刀，左右分別是帶兩個(gè)圓角的小矩形，中間是一段橫長(zhǎng)的矩形。
將中間部分繼續(xù)豎起切，切成一條條1像素寬的矩形，然后需要多寬的矩形，就用多少條1px矩形。打個(gè)簡(jiǎn)單的比方，就是先微分，再積分。
在這個(gè)例子中，使用 background 屬性時(shí)，需要注意給所有塊級(jí)元素設(shè)置寬，寬只需要 .btn 設(shè)置一次就可以。
布局說明：Coding代碼如下，基本的三層嵌套布局。
加入購(gòu)物車
知其所以然
在構(gòu)造這個(gè)布局的時(shí)候，有一個(gè)問題需要明白：
為什么 .btnR 需要放在 .btnL 里面？
.btnL 放在 .btn 里面可以理解，但是 .btnL 和 .btnR 不是并列關(guān)系嗎？假設(shè) .btnR 不放在 .btnL 里面，而是與之并列，會(huì)出現(xiàn)按鈕背景兩邊圓角部分錯(cuò)位排列的效果，原因在于兩個(gè)塊級(jí)元素都有寬高，會(huì)分別占據(jù)一行。
隨著 CSS3 的發(fā)展，如今這個(gè)小 demo 并不是解決類似樣式的最佳方式了，但是里面蘊(yùn)含著 **CSS 滑動(dòng)門**的原理（前幾年非常流行的一種方法，參考傳智播客的導(dǎo)航欄）。當(dāng)然了，在這里以這個(gè)小 demo 為例，主要是為了總結(jié)一下 background 的用法。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/111109.html
摘要：不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化。新增屬性選擇器用于定義元素屬性以開頭的元素的樣式如上所示，標(biāo)記鏈接為綠色?？梢允菙?shù)字，或關(guān)鍵字或公式。 CSS1 中定義的選擇器 類型選擇器 用于選擇指定類型的元素（其實(shí)他就是 html 標(biāo)簽選擇器），常見用法如下： body { /*對(duì) body 元素定義樣式*/ } body,div { ...
摘要：不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化。新增屬性選擇器用于定義元素屬性以開頭的元素的樣式如上所示，標(biāo)記鏈接為綠色?？梢允菙?shù)字，或關(guān)鍵字或公式。 CSS1 中定義的選擇器 類型選擇器 用于選擇指定類型的元素（其實(shí)他就是 html 標(biāo)簽選擇器），常見用法如下： body { /*對(duì) body 元素定義樣式*/ } body,div { ...
摘要：網(wǎng)站性能類似于二八定律，其中的優(yōu)化將帶來網(wǎng)站的性能提升。代碼重用最大的性能缺陷之一是文件大小過大和不必要的瀏覽器呈現(xiàn)。最大程度上減少文件大小的快速方法就是盡可能多地重用樣式。此外，圖像可能被壓縮，刪除任何不必要的注釋和顏色配置文件。 性能與組織 當(dāng)能夠扎實(shí)的理解并編寫HTML和CSS這門專業(yè)知識(shí)。隨著網(wǎng)站代碼量和流量的增長(zhǎng)，另一種新技能也開始發(fā)揮作用，這對(duì)于開發(fā)效率和用戶體驗(yàn)都至關(guān)重要...
摘要：網(wǎng)站性能類似于二八定律，其中的優(yōu)化將帶來網(wǎng)站的性能提升。代碼重用最大的性能缺陷之一是文件大小過大和不必要的瀏覽器呈現(xiàn)。最大程度上減少文件大小的快速方法就是盡可能多地重用樣式。此外，圖像可能被壓縮，刪除任何不必要的注釋和顏色配置文件。 性能與組織 當(dāng)能夠扎實(shí)的理解并編寫HTML和CSS這門專業(yè)知識(shí)。隨著網(wǎng)站代碼量和流量的增長(zhǎng)，另一種新技能也開始發(fā)揮作用，這對(duì)于開發(fā)效率和用戶體驗(yàn)都至關(guān)重要...
閱讀 2201·2021-11-25 09:43
閱讀 1170·2021-11-23 09:51
閱讀 3503·2021-11-23 09:51
閱讀 3632·2021-11-22 09:34
閱讀 1557·2021-10-09 09:43
閱讀 2126·2019-08-30 15:53
閱讀 3166·2019-08-30 14:07
閱讀 575·2019-08-28 18:14
