如何使用CSS設定背景顏色和影像
- 不言原創
- 2018-12-08 16:33:227172瀏覽
用CSS設定背景顏色和影像的方法：1、透過background-color屬性設定背景顏色；2、透過background-image屬性設定背景影像。
本文操作環境：Windows7系統、HTML5&&CSS3版、Dell G3電腦。
使用CSS設定背景我們需要用到background背景屬性，透過background屬性我們可以設定背景顏色和背景圖片，下面我們就來看看CSS設定背景的具體方法。
我們先來看看CSS設定背景顏色
我們需要使用background-color來改變背景顏色
background-color:value（颜色编码或者颜色名称）
在值的部分，你可以輸入諸如＃000000的顏色代碼或諸如white的顏色名稱，設定的顏色就為背景顏色。
background-color的初始值是transparent，在這種情況下，將會套用父元素的背景顏色。如果父元素中沒有設置，它將變為白色。
CSS設定圖像背景
透過使用background-image屬性，我們可以預先設定上傳到伺服器的圖像作為背景。
background-image: url("图像的路径");在url中，輸入要用作背景的圖像檔案的路徑。如果css檔案和映像檔位於同一目錄中，則只有檔案名稱就可以了。
絕對路徑和相對路徑都可以用作影像檔案的路徑。
要輸入相對路徑，請輸入外部樣式表的相對路徑，而不是html檔案的相對路徑。
接著我們來看具體的範例
使用background-color設定背景顏色
程式碼如下
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background-color: skyblue;
}
</style>
</head>
<body>
<p>如何使用CSS設定背景顏色和影像设置</p>
</body>
</html>運行結果
在瀏覽器上顯示如下效果，指定的顏色skyblue被設定為背景顏色
使用background-image設定背景圖片
程式碼如下
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background-image: url("img/t.jpg");
}
</style>
</head>
<body>
<p>如何使用CSS設定背景顏色和影像设置</p>
</body>
</html>運行效果下圖所示
#當螢幕尺寸大於背景圖片時，預設會自動重複顯示背景影像。可以使用background-repeat屬性來變更此設定。
背景影像顯示開始位置位於初始設定的左上角。可以使用background-position屬性變更此設定
以上是如何使用CSS設定背景顏色和影像的詳細內容。更多資訊請關注PHP中文網其他相關文章！