首頁 web前端 css教學 css3支援為網頁新增多個背景圖片嗎

css3支援為網頁新增多個背景圖片嗎

Apr 06, 2021 pm 05:50 PM
css3 背景圖片

css3支援為網頁新增多個背景圖片。在css中,可以透過直接在background-image屬性中指定多個背景路徑來為網頁新增多個背景圖片,語法格式“background-image: url(圖片位址), url(圖片位址)...;” 。

css3支援為網頁新增多個背景圖片嗎

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

在CSS中使用多個背景圖片

如果想在背景中加入一張以上的圖片怎麼辦? CSS3 中可以直接指定多個背景路徑,如下所示:

body {
  background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80);
  background-position: center, top;
  background-repeat: repeat, no-repeat;
  background-size: contain, cover;
}
登入後複製

效果圖:

css3支援為網頁新增多個背景圖片嗎

完整範例位址:https ://codepen.io/duomly/pen/eYpVoJR

(學習影片分享:css影片教學

以上是css3支援為網頁新增多個背景圖片嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

純CSS3怎麼實現波浪效果? (程式碼範例) 純CSS3怎麼實現波浪效果? (程式碼範例) Jun 28, 2022 pm 01:39 PM

純CSS3怎麼實現波浪效果?這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法,希望對大家有幫助!

如何在win10個人化設定中刪除背景圖片 如何在win10個人化設定中刪除背景圖片 Dec 21, 2023 pm 02:31 PM

Win10系統每次使用過的桌面背景都會在設定中的個人化背景圖片裡面顯示,有些用戶想刪除,但是不知道怎麼操作,這篇文章是本站給大家分享的Win10個人化背景圖片刪除方法。查看使用過的桌面背景圖片:1、桌面空白處點選【右鍵】,在開啟的選單項目中,選擇【個人化】;2、在背景中的選擇圖片中,可以查看到您使用過的桌面背景圖片;刪除使用過的桌面背景圖片:注意:本操作涉及到修改註冊表,修改註冊表有風險,請提前備份資料1、同時按下【Win+R】組合鍵,打開運行窗口,輸入【regedit 】命令,然後點選【確定】;2

Win11如何自訂背景圖片 Win11如何自訂背景圖片 Jun 30, 2023 pm 08:45 PM

Win11如何自訂背景圖片?在最新發布的win11系統中,裡面有許多的自訂功能,但是很多小夥伴不知道應該如何使用這些功能。就有小夥伴覺得背景圖片比較單調,想要自訂背景圖,但是不知道如何操作自訂背景圖,如果你不知道如何定義背景圖片,小編下面整理了Win11自訂背景圖片步驟,感興趣的話一起往下看看把! Win11自訂背景圖片步驟1、點選桌面win按鈕,在彈出的選單中點選設定,如圖所示。 2、進入設定選單,點選個性化,如圖所示。 3、進入個人化,點選背景,如圖所示。 4.進入背景設置,點選瀏覽圖片

巧用CSS實現各種奇形怪狀按鈕(附代碼) 巧用CSS實現各種奇形怪狀按鈕(附代碼) Jul 19, 2022 am 11:28 AM

這篇文章帶大家看看怎麼使用 CSS 輕鬆實現高頻出現的各類奇形怪狀按鈕,希望對大家有幫助!

css怎麼隱藏元素但不佔空間 css怎麼隱藏元素但不佔空間 Jun 01, 2022 pm 07:15 PM

兩種方法:1、利用display屬性,只要為元素加上「display:none;」樣式即可。 2.利用position和top屬性設定元素絕對定位來隱藏元素,只需為元素加上「position:absolute;top:-9999px;」樣式。

抖音直播伴侶怎樣加入背景圖片-抖音直播伴侶加入背景圖片的方法 抖音直播伴侶怎樣加入背景圖片-抖音直播伴侶加入背景圖片的方法 Mar 05, 2024 am 09:16 AM

許多在抖音做直播的用戶都會使用抖音直播伴侶軟體,不過你們知道抖音直播伴侶怎樣添加背景圖片嗎?下文就是小編為你們帶來的抖音直播伴侶添加背景圖片的方法,感興趣的用戶快來下文看看。先登入電腦上的抖音直播伴侶,然後進入首頁。在左邊,我們選擇[添加材料]在[場景1]下面。接著,頁面上會有一個添加材料的窗口,我們可以直接選擇[圖片]功能點擊進入。然後,我們會開啟一個當地存放圖片材料的視窗。我們需要選擇我們想要新增的圖片材料,然後點擊右下角的開啟按鈕來新增它們。新增圖片後,我們需要用滑鼠左鍵將圖片拉到適當的

ppt背景圖片怎麼統一替換 ppt背景圖片怎麼統一替換 Mar 25, 2024 pm 04:16 PM

PPT 背景圖片的統一替換是提升簡報視覺風格的重要操作,可透過兩種主要方法實現:投影片母版替換和批次替換。投影片母版替換涉及在母版中刪除原有圖片並插入新圖片,從而應用於所有投影片。批次替換功能則直接取代簡報中所有投影片的背景圖片。統一背景圖片不僅美化簡報,也增強觀眾專注力。選擇與主題相符且品質高的圖片至關重要,並應注意調整透明度、大小等細節。此外,PPT 還提供豐富的背景設定選項,如漸層、紋理和圖案,可根據需求自訂調整。

css3怎麼實現花邊邊框 css3怎麼實現花邊邊框 Sep 16, 2022 pm 07:11 PM

在css中,可以利用border-image屬性來實作花邊邊框。 border-image屬性可以使用圖片來建立邊框,即給邊框加上背景圖片,只需要將背景圖片指定為花邊樣式即可;語法「border-image: url(圖片路徑) 向內偏移值圖像邊界寬度outset 是否重複;」。

See all articles