html中半透明效果,CSS半透明效果的属性和场景
在CSS中與半透明效果相關(guān)的屬性有兩個(gè)：opacity和rgba。
opacity屬性的值規(guī)定透明度。從 0.0 (完全透明)到 1.0(完全不透明)。設(shè)置opacity元素的所有后代元素會(huì)隨著一起具有透明性，一般用于調(diào)整圖片或者模塊的整體不透明度。IE8 以及更早的版本支持替代的 filter 屬性。例如：filter:Alpha(opacity=50)。
rgba用于設(shè)置顏色的透明度，參數(shù)是rgba(red, green, blue, alpha) alpha的取值從 0(完全透明) 到 1(完全不透明)，如rgba(255,255,255,0.8)。
接下來(lái)通過(guò)場(chǎng)景來(lái)描述半透明效果的實(shí)現(xiàn)。
1.鼠標(biāo)懸浮在圖片上，圖片變半透明。做法是給圖片添加一個(gè)偽類(lèi)，修改opacity
.image:hover{
opacity:0.5;
}
2.圖片下部分是半透明的盒子，盒子內(nèi)有描述性的文字。
小指頭.rgba{
position:relative;
width: 300px;
height: 200px;
margin: 20px;
color:rgb(200,140,50);
background-image: url("finger.jpg");
text-align: center;
cursor:pointer;
}
.bottom{
position:absolute;
bottom:0;
width:100%;
height:30px;
line-height:30px;
background-color: rgba(200,200,200,0.4); //設(shè)置顏色的半透明效果
}
3.圖片下部有文字，鼠標(biāo)懸浮在圖片上，圖片變模糊，文字不受影響。外面一個(gè)盒子，里面有兩個(gè)盒子，分別放圖片和文字，圖片的下外邊距為負(fù)值，文字就蓋在圖片上。圖片和文字不在同一個(gè)盒子內(nèi)，所以改變圖片的opacity不會(huì)影響文字。
小指頭.image1{
position:relative;
width: 300px;
height: 200px;
margin-bottom: -20px;
color:rgb(200,140,50);
background-image: url("finger.jpg");
text-align: center;
cursor:pointer;
}
.image1:hover{
opacity:0.6;
}
.text1{
display:block;
position:absolute;
bottom:0;
width:300px;
height: 20px;
color:red;
text-align: center;
cursor:pointer;
}
4.鼠標(biāo)懸浮在圖片上，圖片上出現(xiàn)垂直水平居中的文字，文字是通過(guò)偽元素添加的。圖片出現(xiàn)半透明效果，如果將文字設(shè)置為白色，文字的半透明效果會(huì)很小。它的好處就是只需要寫(xiě)一個(gè)div。
.image2{
position:relative;
width: 300px;
height: 200px;
margin:20px;
text-align: center;
background-image: url("finger.jpg");
cursor:pointer;
}
.image2:hover{
opacity:0.8;
}
.image2:hover:after{
content:"小指頭";
display:inline-block;
font-size:25px;
height:200px;
line-height:200px;
color:#fff;
}
5.電商網(wǎng)站上(如天貓)和新聞網(wǎng)站上(如好奇心研究所)上有需要出現(xiàn)半透明效果的地方。大多數(shù)是采用如下兩種結(jié)構(gòu)：
這是一些文字
.href{
display:inline-block;
width:250px;
height:400px;
margin:20px;
text-decoration: none;
color:#000;
}
用a標(biāo)簽包裹著圖片標(biāo)簽和存放文字的盒子，此時(shí)的a標(biāo)簽表現(xiàn)為塊級(jí)元素，a標(biāo)簽的寬度和高度均大于圖片的寬度和高度。當(dāng)鼠標(biāo)懸浮到a標(biāo)簽上，a標(biāo)簽內(nèi)的圖片會(huì)加上半透明效果，筆者并未找到實(shí)現(xiàn)這樣效果的css，猜想可能是由JS實(shí)現(xiàn)，若筆者猜想有誤，還請(qǐng)觀者指正。
或者是這樣的結(jié)構(gòu)：
這是一些文字
在父盒子里面放兩個(gè)絕對(duì)定位的子盒子，一個(gè)放圖片，一個(gè)放文字，放文字的盒子是個(gè)表現(xiàn)為塊狀元素的a標(biāo)簽，將背景色設(shè)置為了半透明顏色，筆者猜想是父盒子響應(yīng)了鼠標(biāo)懸浮事件，然后修改a標(biāo)簽的visibility屬性。
一個(gè)父盒子的opacity會(huì)影響子盒子，opacity也大多是用于圖片上，而rgba是用于顏色上。而opacity這個(gè)屬性還具有更有意思的地方，那就是創(chuàng)建層疊上下文，這個(gè)筆者會(huì)在下篇文章《細(xì)說(shuō)opacity和層疊上下文》中分析。
總結(jié)
以上是生活随笔為你收集整理的html中半透明效果,CSS半透明效果的属性和场景的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 前端学习（1665）：前端系列实战课程之
- 下一篇： CSS部分设置背景颜色为半透明