一招搞定css元素五彩斑斕的背景
- 醉折花枝作酒筹原創
- 2021-08-12 15:28:452571瀏覽
本篇文章將開始新的一個章節。所有好看的事物都離不開顏色，今天我們就來學習一個最簡單的，那就是為元素設定背景顏色。來學習吧。
我們也知道沒有背景顏色的元素是不好看的，所有我們還是需要為元素設定背景顏色的。
我們先來看一個小範例吧，了解什麼是背景顏色，怎麼去設定。
已知，我們有一個div元素，一個p元素，現在我們希望div元素的背景顏色是紅色，而p元素的背景顏色是藍色，請問該如何做？
<!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>
<style>
div{
background-color: red;
}
p{
background-color:blue;
}
</style>
</head>
<body>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
</body>
</html>這個小例子的結果是
#可以看到，我們完成了題目所給予的要求，div元素的背景顏色是紅色，而p元素的背景顏色是藍色。
知道這麼多之後，我們去看一下什麼屬性可以設定背景顏色吧。
background-color屬性設定元素的背景顏色。這個屬性為元素設定一種純色。這種顏色會填滿元素的內容、內邊距和邊框區域，擴展到元素邊框的外邊界（但不包括外邊距）。如果邊框有透明部分（如虛線邊框），會透過這些透明部分顯示出背景色。
這個屬性還有一個十分重要的值，這是透明值。儘管在大多數情況下，沒有必要使用 transparent。不過如果您不希望某元素擁有背景色，同時又不希望使用者對瀏覽器的顏色設定影響到您的設計，那麼設定 transparent 值還是有必要的。
推薦學習：css影片教學
#以上是一招搞定css元素五彩斑斕的背景的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn