首頁 >web前端 >css教學 >css設定背景顏色

css設定背景顏色

藏色散人
藏色散人原創
2021-01-18 15:35:2731283瀏覽

css設定背景顏色的方法:先建立一個HTML範例檔案;然後在head頭部中加入style標籤;接著在body中定義一個p標籤和h1標籤;最後透過background-color屬性設定對應的背景顏色即可。

本文操作環境:宏基S40-51、Windows10家庭中文版、HTML5&&CSS3&&HBuilderX.3.0.5

推薦:《css影片教學

css設定背景顏色的方法

在CSS中,可以使用background-color屬性來設定背景顏色。

background-color屬性設定一個元素的背景顏色。元素的背景是元素的總大小,包括填充和邊界(但不包括邊距)。

background-color屬性為元素設定一種純色。這種顏色會填滿元素的內容、內邊距和邊框區域,擴展到元素邊框的外邊界(但不包括外邊距)。如果邊框有透明部分(如虛線邊框),會透過這些透明部分顯示出背景色。

background-color屬性可以設定的值:

color_name:規定顏色值為顏色名稱的背景顏色(例如 red)。

hex_number:規定顏色值為十六進位值的背景顏色(例如 #ff0000)。

rgb_number:規定顏色值為 rgb 程式碼的背景顏色(例如 rgb(255,0,0))。

transparent:預設。背景顏色為透明。

儘管在大多數情況下,沒有必要使用 transparent。不過如果您不希望某元素擁有背景色,同時又不希望使用者對瀏覽器的顏色設定影響到您的設計,那麼設定 transparent 值還是有必要的。

範例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: pink;
        }

        h1 {
            background-color: #17c4ff;
        }

        p {
            background-color: rgb(255, 218, 51);
        }
    </style>
</head>
<body>
<h1>这是标题 1</h1>
<p>这是一个段落。</p>
</body>
</html>

效果圖:

css設定背景顏色

#

以上是css設定背景顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn