有時大家在看css時,看到有的css屬性定義為background:transparent。意思就是背景透明。實際上background預設的顏色就是透明的屬性。
例如如果一個元素覆蓋在另一個元素之上,而你想顯示下面的元素,這時你就需要把上面這個元素的background設定transparent。
推薦手冊:css線上手冊
#下面介紹css中的background:transparent的作用
一、background的介紹
background 是用於在一個宣告中設定所有背景屬性的一個簡寫屬性。
可能的值:
background-color background-image background-repeat background-attachment background-position
例如
background : transparent none repeat scroll 0% 0%
分別代表
背景屬性:背景顏色背景圖片背景是否重複背景時候隨瀏覽器滾動背景平位置背景垂直位置
background : background-color || background-image || background-repeat || background-attachment || background-position
上面CSS的解釋
transparent 表示透明无颜色,是background-color 的默认值 none 表示没有设置背景图片 repeat 表示图片重复 scroll 表示背景图片随浏览器下拉而滚动 0% 水平位置在x0 0% 垂直位置在y0
#相關文章推薦:
1. CSS中background什麼意思? background用法詳解
2.css如何利用transparent屬性設定透明度? transparent屬性繪製各種三角形(程式碼實例)
相關影片教學:
1.CSS影片教學-玉女心經版
#二、css中的background:transparent的作用
backgroundcolor為transparent的元素的事件會對被它遮住的元素所截獲.如果我們所觸發的物件沒有焦點,那麼事件會交換給transparent的元素處理並按這個元素進行冒泡,否則有焦點的會事件便由有焦點的那個對象處理,不會交換,並且按有焦點的元素進行冒泡
1、例如如下一個div的蒙板,該功能實現屏蔽用戶對網頁上的其他元素進行操作.
div.style.position="absolute"; div.style.width=document.body.clientWidth+"px"; div.style.height=document.body.clientHeight+"px"; div.style.left="0px"; div.style.top="0px"; div.style.zIndex="2000"; div.style.backgroundColor="black"; div.style.filter="alpha(opacity="+0+");";
主要看後面兩行程式碼,如果我們沒有上面程式碼的後兩句,那麼我們便可以對蒙板後的元素進行操作,也就是說起不到屏蔽的作用,但是這個操作是有限制的,具體說就是我們只可以對有焦點的元素進行操作,比如文本,圖片,按鈕等。
2、例如下面DIV
<div style="border:1px red solid;width:100px;height:100px" onclick="alert(1)">123</div>
正常情況下,只要你點擊這個div的任何位置,都會alert的,但是當它被一個backgroundcolor為transparent的元素遮住的時候,我們只有點擊123才會alert,因為文本是可以獲得焦點的,同理其他元素也一樣.
以上是css中的關於background:transparent的介紹以及作用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

我假設你們中的大多數人已經聽說過蓋茨比,至少很鬆散地知道,這基本上是一個用於React站點的靜態站點生成器。通常


熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

mPDF
mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3 英文版
推薦:為Win版本,支援程式碼提示!

SublimeText3漢化版
中文版,非常好用

Dreamweaver Mac版
視覺化網頁開發工具

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器