用 CSS 實現傾斜的背景顏色

們在設計網站的時候，有時候為了體現出別具一格的風格，往往會設計出一些特殊的風格。這里就舉一個比較常見的例子 —— 傾斜的背景顏色。

在CSS中，沒有某一個屬性能夠直接實現傾斜的背景顏色，而是需要通過一些“手段”來實現。最常想到的方案就是在內容的底部放置一個div，給這個div設定一個背景顏色，然后讓這個div傾斜一個角度，從而實現傾斜的背景顏色。比如像下圖所示的案例：

那么下面就來用一個基本的實例來解釋并實現傾斜背景的效果：

首先要說明一下，頁面導航條是固定在頁面頂部的，導航條不會隨著頁面的滾動而移動。這個效果的實現非常簡單，就是利用了 position 這個屬性的 fixed 值來實現的。

我下面的代碼實例中，HTML用來給頁面上添加元素，而在 CSS 部分需要精細化的設定屬性的參數值，而且需要若干個HTML標簽的CSS來配合，從而實現傾斜背景的效果。所以我在CSS代碼部分用了比較多的注釋來描述這些屬性的效果和目的，大家在閱讀的時候可以將 CSS 結合著 HTML 一起來理解?；蛘呖梢灾苯幽梦业倪@個實例作為一個模板來使用。

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>

    <div class="navbar-bg">
        <ul class="navbar">
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item sign">
                <a href="https://www.baidu.com">Sign</a>
            </li>
        </ul>
    </div>

    <div class="box-bg">
        <div class="box">
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
        </div>
    </div>

    <div class="content">
        <h1>This is content</h1>
    </div>

    <div class="footer">
        <div class="footer-bg">
            <ul class="list">
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
            </ul>
        </div>
    </div>

</body>

</html>

為了讓導航條和其他元素都能夠與頁面的兩邊留出距離，我在實際內容標簽的外圍又包裹了一層div，主要在這個包裹的div里設定左右內間距，從而實現兩邊留白的效果。這些外圍包裹的 div 的 class 名稱一般都會有一個后綴 "-bg"。

在實際內容的排列時，我采用了更加方便靈活的彈性布局，這樣會相對的減少HTML和CSS的代碼量。

另外，如果想要實現傾斜的背景顏色，那么這些帶有 bg 后綴的 div 就是需要傾斜的標簽。傾斜這些 div 其實很簡單，只需要設定一個 transform: skew(0deg, -9deg) 這樣的CSS代碼即可，但是我們可以想象一下，原本是長方形的 div 按照 Y 軸逆時針旋轉了一個弧度（-9deg）后，它會變成一個平行四邊形，這個平行四邊形是左邊低右邊高。這樣就會露出它后面的白色的 body 的部分。所以這種玩法麻煩的地方就是如何通過多個 CSS 屬性的配合來遮住露出的白色的body部分。下面就來看一下這個HTML對應的 CSS 代碼部分。

在大家閱讀 CSS 的代碼之前，我給出一個原理圖來解釋一下其中的原理：

當外圍的 div 傾斜了之后，就需要把內容部分的div的上部的內間距增大，以此來遮住平行四邊形的左側露出的白色區域。這是頁面上部區域的原理。

那么頁面底部也同樣需要實現這樣傾斜背景顏色的設計，這樣才能將風格一致，產生美感。原理還是這個原理圖所示的邏輯，不同的地方在于，底部最外圍的 div 不傾斜，而是需要兩個屬性，height 和 overflow-y，并且這個 div 不能帶有背景顏色。它們的作用是當它里面的內容超出這個 div 的區域時就不顯示，這樣就會讓上圖中藍色的平行西變形的左下角區域被紅色的框線裁剪掉，從而讓這個div 乖乖的呆在頁面的底部。而這個 div 里面一層的 div 需要讓它傾斜，而且還帶有一個背景顏色。這樣組合出來的效果就是一個看似是左右兩邊是豎線，下部是橫線，只有上部是斜線的帶有背景顏色的四邊形，這個四邊形里面是實際的頁面內容。

最終的樣子在這篇 CSS 代碼的最后展示出來了。

CSS

望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。

【技術等級】初級

【承接文章】《CSS背景屬性實戰，靈活使用background屬性，原來如此簡單》

本文小海老師為大家詳細講解圖片精靈（CSS Sprite）的使用。本文屬于前端開發的初級教程，適合于剛剛開始接觸CSS技術的學習者。

一、什么是圖片精靈：

在一個網站中，圖片是必不可少的。除了用來展示的大圖片以外，還可能包括大量的圖標。這些圖標幅面一般較小，往往制作的較為成套，還可能出現一個圖標多次使用的情況。

頁面每次加載圖標，都需要向網站的服務器提交一次Http請求。如果能夠減少頁面的Http請求次數，就可以提高網頁的顯示速度（當然，網頁的顯示速度還與很多因素有關）。

鑒于上述原因，我們想到的解決方案如下：

將網站中用到的所有圖標都做到一張大圖片之中，在需要顯示圖標的位置處，利用CSS的background-image屬性加載這個大圖片，再利用background-position屬性定位需要顯示的圖標的具體位置。

這就是圖片精靈（CSS Sprite）的使用原因和工作原理。下圖為我們展示了搜狐網的精靈圖，如下所示。

搜狐網站的精靈圖實例

那么，如何制作這張大圖片呢？又如何使用CSS屬性來實現這個功能呢？小海老師一步一步的教大家完成圖片精靈技術的使用。

二、第一步：制作精靈圖。

原理中提到的所有圖標都在其上的大圖片，我們就把它稱為“精靈圖”。為了讓精靈圖中的圖標可以用在不同背景下的場合中，一般精靈圖都應該是背景透明的png格式圖片。

我們可以使用Adobe Photoshop 軟件來制作精靈圖片。

制作精靈圖片時，要將每一個圖標的位置都擺好，盡量讓所有圖標都鋪滿精靈圖片。最后保存的時候，可以在Photoshop中按照下列操作進行保存：

“文件”菜單 | 存儲為Web和設備所用格式

選擇上述命令后，Photoshop會彈出下圖中所示的窗口。

存儲為Web和設備所用格式

在這個窗口中：選擇“png-24”，勾選“透明度”，單擊“存儲”。就可以保存為背景透明的png格式的圖片了。

三、第二步：獲得所需圖標在精靈圖中的數據。

例如在一個<div></div>容器中需要加載精靈圖中的一個圖標。那么，需要知道這個圖標的下列數據：

圖標的大?。喊▓D標的寬度和高度。
圖標在精靈圖中的位置：包括圖標在精靈圖中的水平坐標和垂直坐標。

圖標的大小往往較為簡單，因為圖標是設計師自己設計并制作的，所以一開始就會知道圖標的尺寸。

那么，圖標在精靈圖中的位置要如何知道呢？這需要借助Photoshop中的“信息”面板。

利用“信息”面板獲得圖標在精靈圖中的坐標

在Photoshop中打開“信息”面板有下列幾種方法：

在“窗口”菜單 | 信息。
使用快捷鍵：F8

在“信息”面板中的X和Y就會顯示光標所在位置的坐標。我們只需將光標放在所要圖標的左上角，就可以通過該面板中的X和Y后面的數據得知該圖標在精靈圖中的位置了。

四、第三步：利用CSS加載精靈圖中的圖標。

在HTML文檔中有一個<div></div>標記對，該標記對的id屬性取值為box。該標記對要展示一個寬度為200px，高度為50像素的圖標。通過在Photoshop中測量，該圖標在精靈圖中的坐標為X:140、Y:52。假設精靈圖存放在站點根目錄的images文件夾中，文件名為 sprite.png。則下列CSS代碼就可以為這個<div></div>標記對加載圖標了。

<div id=”box”></div>
#box{
width:200px; height:50px;
background-image:url(../images/sprite.png);
background-position:-140px -52px;
}

為什么這樣書寫就可以得到這個圖標呢？

首先，容器的寬度和高度限制了只能顯示精靈圖片中200px*50px大小的一個區域，并不能完全顯示精靈圖的全部內容。

其次，background-position 屬性用于表示背景圖片在容器中的位置。為什么是負值呢？請仔細看下圖。

圖片精靈的原理

我們很容易看到，選擇負值，相當于精靈圖的位置在容器的外部，所以指定位置的圖標就顯示在容器中了。

文章預告

下一篇文章中，小海老師會繼續為大家向下講解CSS屬性。下一次我們講解列表屬性。對于渴望在前端開發道路上前進的你一定不能錯過！

小海教材

如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。

小海聲明

在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。

索 HTML 圖像的不同概念，以及如何有效地使用它們在您的網站上增加視覺吸引力、傳達信息和表達情感。本指南包含大量示例和實用技巧，可幫助您創建一個視覺效果驚人且用戶友好的網站。

圖像是網頁設計師和開發人員的強大工具，它們可用于傳達信息、表達情感并使網站更具視覺吸引力。 HTML 圖像概念是網頁設計和開發的重要方面。它們用于將圖像嵌入到網頁中，以便于顯示和共享圖片和圖形。在這篇博文中，我們將探討 HTML 圖像的不同概念以及如何有效地使用它們。

首先，讓我們談談不同類型的 HTML 圖像。有兩種主要類型的圖像：內嵌圖像和背景圖像。內聯圖像直接嵌入到 HTML 代碼中，而背景圖像則應用于元素的背景。

1 | 內聯圖像

在此示例中，內聯圖像“image.jpg”直接嵌入到 HTML 代碼中并顯示給用戶。

2 | 背景圖片

在此示例中，背景圖像“image.jpg”應用于 div 元素的背景并顯示給用戶。

3 | 替代 (alt) 文本

以合乎邏輯且一致的方式使用圖像也很重要。這意味著您應該使用它們來傳達與網頁內容相關的信息或表達情感，而不是隨意使用它們。此外，使用 alt 屬性為圖像添加文本替代也很重要，它允許可能使用屏幕閱讀器的用戶訪問圖像，或者以防圖像加載失敗。

在此示例中，替代文本“日落的美麗圖像”讓用戶清楚地了解圖像所代表的內容。

4 | 調整圖像大小

另一個 HTML 圖像概念是使用寬度和高度屬性調整圖像大小的能力。這些屬性允許您調整圖像大小以適合您的布局和設計。

在此示例中，圖像的寬度設置為 300 像素，圖像的高度設置為 200 像素。

結論

HTML 圖像概念是網頁設計和開發的重要方面。它們用于將圖像嵌入到網頁中，以便于顯示和共享圖片和圖形。通過了解不同類型的圖像并正確使用它們，您可以為您的網站增加額外的視覺吸引力，并以有力的方式傳達信息或表達情感。無論是使用內聯圖片還是背景圖片，添加替代文本或調整大小，這些概念都是創建視覺效果驚人且用戶友好的網站的關鍵。

但不要只相信我們的話，您自己試試吧！嘗試使用 HTML 圖像，看看它們如何增強您網站的整體外觀。通過每一行代碼，您離創建一個您的訪問者會喜歡的美觀且引人入勝的網站又近了一步。請記住，圖像具有喚起情感和傳達信息的力量，因此請明智地使用它們并將它們作為您網頁設計策略的重要組成部分。通過正確組合 HTML 和圖像，您將創建一個脫穎而出并給訪問者留下持久印象的網站。

在線咨詢

上一篇：HTML教程（看完這篇就夠了）
下一篇：騰訊視頻 Python 爬蟲項目實戰