CSS - Opacity effect child element
Table of Contents
#
CSS - Opacity effect child element
在利用 opacity 做背景時常遇到個問題就是子元素也被設置 opacity
這時就可以利用 CSS 的 :before 或 :after
<div class="bg-2">
<h2>Title</h2>
<p>Content</p>
<img src="http://blog.soonr.com/wp-content/uploads/2013/03/Google-Play-Badge.png" alt="google play" />
</div>
.bg-2 {
position: relative;
&:before {
content: "";
z-index: -99;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
@include opacity(0.8);
}
}
CodePen