CSS實現(xiàn)背景圖片透明文字不透明效果的兩種方法
發(fā)布時間：2023-09-18 17:09:56 作者：ymz316 
我要評論
我要評論網(wǎng)頁設(shè)計中經(jīng)常要在背景圖上放一些文字介紹，這就需要背景圖片能有透明效果以便突出顯示文字信息，本文就詳細的介紹CSS實現(xiàn)背景圖片透明文字不透明效果，感興趣的可以了解一下
網(wǎng)頁設(shè)計中經(jīng)常要在背景圖上放一些文字介紹，這就需要背景圖片能有透明效果以便突出顯示文字信息，經(jīng)多方查閱，終于找到了2種有趣的方法。
1.在文字層添加rgba樣式實現(xiàn)半透明效果
方法：
- 背景圖片層添加樣式：
background-size: cover;和position: relative; - 在文字層添加樣式
background:rgba(255,255,255,0.3)(白底透明，一般文字顏色用黑色系)或者background:rgba(0,0,0,0.3)(黑底透明，一般文字顏色用白色系)
代碼：
<style>
.div-bg {
background: url(https://www.hollowman.cn/usr/themes/hy/images/backgroundimages/pub_5.jpg) no-repeat;
background-size: cover;
position: relative;
width: 500px;
height: 200px;
opacity:0.5;
}
.div-bg-white {
background: rgba(255, 255, 255, 0.5);
}
.div-bg-dark {
background: rgba(0, 0, 0, 0.5);
}
</style>
<div class="div-bg">
<div class="div-bg-white">在底層div添加樣式 background:rgba(255,255,255,0.5) 效果（白底透明，一般文字顏色用黑色系）</div>
<br>
<div class="div-bg-dark" style="color:white">在底層div添加樣式 background:rgba(0,0,0,0.5) 效果（黑底透明，一般文字顏色用白色系）</div>
</div>效果:
說明：
為什么不在背景圖片層上設(shè)置
opacity:0.5（不透明度）?因為使用 opacity 設(shè)置元素的透明度是一個整體的透明度，會作用于所有后代元素，當(dāng)你設(shè)置opacity：0.5的時候，背景圖、背景色、文字都會變成半透明屬性，所以想實現(xiàn)字體不透明是不行的。
而如果直接在文字層設(shè)置rgba(0,0,255,0.5)，前三個屬性是 RGB 顏色,最后一個屬性表示的是透明度，用rgba(0,0,255,0.5)就可以實現(xiàn)背景透明字體不透明，rgba 不會影響內(nèi)部的透明度。
2.利用濾鏡實現(xiàn)半透明效果
方法：
- 背景圖片層添加樣式：相對定位
position: relative; - 背景圖片層利用偽元素，添加樣式：絕對定位
position: absolute;，濾鏡不透明度filter: opacity(50%);，content: '';（空內(nèi)容），z-index：-1(避免遮蓋其他元素)。
代碼：
<div class="filter-bg">
<p>背景圖片層利用偽元素樣式實現(xiàn)透明</p>
</div>
<style>
.filter-bg {
width: 500px;
height: 200px;
/* 主層必須為相對定位,否則偽元素的圖片將不符合預(yù)期 */
position: relative;
}
.filter-bg:before {
/* 下面4行代碼確保背景圖覆蓋主層 */
background: url(https://www.hollowman.cn/usr/themes/hy/images/backgroundimages/pub_5.jpg);
background-size: cover;
width: 100%;
height: 100%;
/* 插入空內(nèi)容，必須要的樣式 */
content: '';
/* 絕對定位，確保背景圖起點在主層的0,0位置 */
position: absolute;
left: 0;
top: 0;
/*避免遮蓋其他元素*/
z-index: -1;
/* 濾鏡效果 */
-webkit-filter: opacity(50%);
filter: opacity(50%);
}
</style>效果:
說明：
這里利用偽元素，將濾鏡設(shè)置的背景半透明度設(shè)置在偽元素上而不是主層上，因此其效果不會影響父元素上的文字。
關(guān)于濾鏡 filter 還有更多其他的特效可以學(xué)習(xí)，下面是一些常用filter函數(shù)：
| 濾鏡效果 | 函數(shù) | 補充說明 |
|---|---|---|
| 無 | none | 默認(rèn)值，表示沒有效果 |
| 模糊 | blur(px) | 為圖像設(shè)置高斯模糊，默認(rèn)值為 0，單位為像素，值較大越模糊 |
| 調(diào)整亮度 | brightness(number) | number越大圖像越亮，number不能取負值，可以是整數(shù)也可以是百分比 |
| 調(diào)整灰度 | grayscale(%) | 將圖像轉(zhuǎn)換為灰度圖像，默認(rèn)值為 0%，表示原始圖像；100％ 表示將圖像完全變成灰度圖像（即黑白圖像），不允許為負值 |
| 調(diào)整對比度 | contrast(%) | 默認(rèn)值為 100％，代表原始圖像；0％ 將使圖像完全變黑；當(dāng)值超過 100％ 時圖像將獲得更高的對比度 |
| 陰影 | drop-shadow(h-shadow v-shadow blur spread color) | 為圖像添加陰影效果，參數(shù)說明如下： h-shadow： 必填值，指定水平方向陰影的像素值，若值為負，則陰影會出現(xiàn)在圖像的左側(cè)； v-shadow： 必填值，指定垂直方向陰影的像素值，若值為負，則陰影會出現(xiàn)在圖像的上方； blur： 可選值，為陰影添加模糊效果，默認(rèn)值為 0，單位為像素，值越大創(chuàng)建的模糊就越多（陰影會變得更大更亮），不允許使用負值； spread： 可選值，默認(rèn)值為 0，單位為像素。若值為正，則陰影將會擴展并增大；若值為負，則陰影會縮??； color： 可選值，為陰影添加顏色，如未指定，則由瀏覽器來絕對，通常為黑色。 注意： Chrome、Safari 和 Opera 等瀏覽器不支持第 4 個參數(shù)，如果添加，則不會有任何效果 |
| 反轉(zhuǎn)圖像 | invert(%) | 默認(rèn)值為 0%，表示原始圖像；100% 則表示完全反轉(zhuǎn)，不允許使用負值 |
| 不透明度 | opacity(%) | 默認(rèn)值為 100%，表示原始圖像；0% 表示完全透明，不允許使用負值 |
| 圖像轉(zhuǎn)為棕褐色 | sepia(%) | 默認(rèn)值為 0%，表示原始圖像；100% 表示圖像完全變成棕褐色，不允許使用負值 |
| 調(diào)整飽和度 | saturate(%) | 默認(rèn)值為 100%，表示原始圖像；0% 表示圖像完全不飽和，不允許使用負值 |
| 圖像色相旋轉(zhuǎn) | hue-rotate(deg) | 該值用來定義色環(huán)的度數(shù)，默認(rèn)值為 0deg，代表原始圖像，最大值為 360deg |
到此這篇關(guān)于CSS實現(xiàn)背景圖片透明文字不透明效果的兩種方法的文章就介紹到這了,更多相關(guān)CSS背景圖片透明文字不透明內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS實現(xiàn)背景圖片透明而文字不透明效果的兩種方法
這篇文章主要介紹了CSS實現(xiàn)背景圖片透明而文字不透明效果的兩種方法,需要的朋友可以參考下2017-04-25