如何使用CSS來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)背景半透明

發(fā)布時(shí)間：2022-03-05 10:12:52 來(lái)源：億速云閱讀：251 作者：小新欄目：web開(kāi)發(fā)

小編給大家分享一下如何使用CSS來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)背景半透明，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一、DIV CSS半透明根本引見(jiàn)

設(shè)置裝備擺設(shè)DIV半通明CSS代碼：

div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;}

注明： 1、filter：對(duì)win IE配置半通明濾鏡造詣，filter:alpha(Opacity=80)代表該對(duì)象80%半通明，火狐閱讀器不認(rèn) 2、-moz-opacity：對(duì)mozilla firefox火狐瀏覽器實(shí)現(xiàn)半無(wú)色，win IE不認(rèn)此屬性，-moz-opacity:0.5相當(dāng)于設(shè)置半無(wú)色為50% 3、opacity：對(duì)除IE外全數(shù)涉獵器贊成包括谷歌，放著末首要針對(duì)google瀏覽器，opacity: 0.5;透露表現(xiàn)設(shè)置裝備擺設(shè)50%半通明

為了察看到對(duì)DIV半通明完成，咱們?cè)O(shè)置兩個(gè)DIV層，離別一個(gè)放于其余一個(gè)DIV層內(nèi)，外層DIV命名為“.div-a”;下面被網(wǎng)羅的層CSS類定名為“.div-b”，組成“.div-b”盒子放于“.div-a”內(nèi)

我們對(duì)底層DIV配置一個(gè)布景是一張圖片，下面的DIV盒子設(shè)置村彩色。

二、未配置半無(wú)色花樣實(shí)例

1、遵照刻畫實(shí)例，未設(shè)置裝備擺設(shè)半無(wú)色HTML源代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>半無(wú)色實(shí)例在線演示 css5.com.cn</title>
<style>
.div-a{ bac公斤round:url(div-a-bg.png) no-repeat;width:230px;height:136px;padding:10px;}
.div-b{ bac公斤round:#000;width:200px;height:100px;padding:5px;color:#F00}
</style>
</head>
<body>
<div class="div-a">
<div class="div-b">DIV半透明實(shí)例演示</div>
</div>
</body>
</html>

2、未設(shè)置裝備擺設(shè)半無(wú)色CSS名目截圖：

如何使用CSS來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)背景半透明

三、對(duì)DIV配置CSS半透明格局實(shí)例

1、我們對(duì)“.div-b”抉擇器介入半無(wú)色格局代碼：

filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;

配置60%半透明成績(jī)

殘缺實(shí)例網(wǎng)頁(yè)HTML代碼以下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>半通明實(shí)例在線演示 css5.com.cn</title>
<style>
.div-a{ bac千克round:url(div-a-bg.png) no-repeat;width:230px;height:136px;padding:10px}
.div-b{ bac公斤round:#000;width:200px;height:100px;padding:5px;color:#F00;
filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6}
/* CSS詮釋闡明：這里對(duì)CSS代碼換行是為了讓代碼在此我要中顯示完整，換行后CSS成果不受影響 */
</style>
</head>
<body>
<div class="div-a">
<div class="div-b">實(shí)現(xiàn)DIV半通明實(shí)例演示</div>
</div>
</body>
</html>

2、在閱讀器效果截圖：

如何使用CSS來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)背景半透明

總結(jié)：依照以上兩個(gè)實(shí)例，第一個(gè)沒(méi)有設(shè)置裝備擺設(shè)半透明技倆，另外一個(gè)配置半透明名目而完成了div層半通明功效，各人或許遵照緊要調(diào)解半無(wú)色值，實(shí)現(xiàn)想要半無(wú)色度。設(shè)置裝備擺設(shè)半通明功效要考慮IE瀏覽器、谷歌、火狐等涉獵器兼容贊成，所以我們半透明格局代碼務(wù)必殘破。

以上是“如何使用CSS來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)背景半透明”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

如何使用CSS來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)背景半透明

一、DIV CSS半透明根本引見(jiàn)

二、未配置半無(wú)色花樣實(shí)例

三、對(duì)DIV配置CSS半透明格局實(shí)例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

二、未配置半無(wú)色花樣實(shí)例

三、對(duì)DIV配置CSS半透明格局實(shí)例