用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設定背景顏色
程式碼如下
運行結果
在瀏覽器上顯示如下效果,指定的顏色skyblue被設定為背景顏色
使用background-image設定背景圖片
程式碼如下
運行效果下圖所示
#當螢幕尺寸大於背景圖片時,預設會自動重複顯示背景影像。可以使用background-repeat屬性來變更此設定。
背景影像顯示開始位置位於初始設定的左上角。可以使用background-position屬性變更此設定
以上是如何使用CSS設定背景顏色和影像的詳細內容。更多資訊請關注PHP中文網其他相關文章!