opacity 跟 background 差別

  • opacity 子元素都會受影響，也會變成透明
  • background-color 子元素就不會影響

example

opacity

Test 

<style>
.bg{
background: url("/images/alphaBG.png");
width: 800px;
height:600px;
background-position:center;
color:black;
font-size:8rem;
opacity:.6;
}
.bg-txt{
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
</style>
<div class='bg'>
    <div class='bg-txt'>
        Test
    </div>
</div>

上面的範例連文字都會有透明

backgroud

Test 

<style>
.bg{
background: url("/images/alphaBG.png");
width: 800px;
height:600px;
background-position:center;
color:black;
font-size:8rem;
}
.bg-txt{
width:100%;
height:100%;
background: rgba(255,255,255,.3);
display:flex;
justify-content:center;
align-items:center;
}
</style>
<div class='bg'>
    <div class='bg-txt'>
        Test
    </div>
</div>

文字不會透明了，只有背竟有透明一點

參考資料

CSS Opacity VS Alpha | Opacity 跟 Alpha的差異 | 調整透明度 CSS實現背景圖片透明，文字不透明效果