简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

background-image屬性怎麼用

青灯夜游
發布： 2019-02-18 11:55:23
原創
24508 人瀏覽過

background-image屬性是用來設定元素的一個或多個背景圖像，用逗號（，）分隔。

background-image屬性怎麼用

CSS  background-image屬性

##作用：background-image屬性為元素設定背景圖像。

語法：

background-image:url(图片路径)
登入後複製

說明：background-image屬性設定的背景圖片會佔據了元素的全部尺寸，包括內邊距和邊框，但不包括外邊距。預設地，背景圖像位於元素的左上角，並在水平和垂直方向上重複。

提示：請設定一個可用的背景顏色，這樣的話，如果背景圖片不可用，可以使用背景色帶代替。

CSS  background-image屬性的使用範例#

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 

<style>
#example1 {
    background-color:#cccccc;
    background-image:url("https://img.php.cn/upload/article/000/000/024/5c6a290265dba776.gif"),url("https://img.php.cn/upload/article/000/000/024/5c6a2793a13ac244.gif");
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}
</style>
</head>
<body>

<div id="example1">
<h1>Hello World!</h1>
<p>测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</p>
<p>测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</p>
</div>

</body>
</html>
登入後複製

效果圖：

background-image屬性怎麼用

#以上就是本篇文章的全部內容，希望能對大家的學習有所幫助。


以上是background-image屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
css
來源：php.cn
上一篇：background屬性怎麼用 下一篇：background-attachment屬性怎麼用
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
Vue 開發工具中元件旁邊的效能數字是多少？ 有人對Vue開發工具中的某個功能有見解或資源嗎？在元件窗格上，它顯示了我的元件，然後是這些紅色和黃 色的小方塊，以及我假設的元件的效能。當我第一次載入應用程式時，它們不會出現，但例...
來自於 2023-11-09 14:46:48
0
1
305
未捕獲的類型錯誤：無法設定未定義的屬性（設定'innerHTML”） 我正在嘗試使用php創建一個網頁，在“連續文字框”類別（由我的類別定義）的元素上，單擊時必須啟動一個Javascript函數，該函數應該更改另一個函數的內容id“harta-mod...
來自於 2023-11-08 21:06:09
0
1
278
如何從 Pinia getter 有條件地解構物件屬性？ 我有以下商店：exportconstuseMyStore=defineStore('myStore',{state:()=>{return{openTransOnly:fal...
來自於 2023-11-08 17:47:18
0
1
275
解決Laravel-8中嘗試在null上讀取屬性"id"的問題 運行時出現此錯誤phpartisanmigrate:fresh--seed此命令將在MySQL資料庫中建立表，並將資料庫詳細資料DB_DATABASE填入.env檔中。 paren...
來自於 2023-11-08 14:07:01
0
2
155
修改App\Models\User::$profile的重載屬性間接修改無效 嘿，我正在使用laravel9，我的應用程式中的兩個模型之間存在關係：使用者和個人資料。 User模型與設定檔模型具有hasOne關係。當我嘗試從設定檔控制器執行更新方法時，出現錯...
來自於 2023-11-08 11:50:44
0
1
270
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！