css實現單色或圖片背景透明,而文字不透明的方法

一.單色背景
方法: 不使用opacity屬性,而是使用rgba
例子:

<style>
   .bg {
    background-color:rgba(0,0,0,0.4)
   }
</style>

<div class="bg">背景是透明度0.4的黑色，文字不透明</div>

效果:

二.圖片做背景
方法1: 將圖片跟文字設置成兄弟關係，對圖片設置opacity屬性，把文字設置成絕對定位，然後將其定位到圖片上
例子:

<style>
   .bg-box {
     position:fixed;
     top: 0;
   }
   .bg {
    position:absolute; 
    background:url('圖片地址') no-repeat;
    height:100px; width:400px; 
    opacity:0.4
   }
   .font-text {
    position:absolute; 
    height:100px; 
    width:400px;
   }
</style>

<div class="bg-box">
    <div class="bg"></div>
    <div class="font-text">背景是透明度0.4的圖片，文字不透明</div>
</div>

效果:

方法2: 這個可以說不屬於css的範圍,只要叫你的ui把圖片導出爲半透明的就行了…