疑似要素を使って背景を任意の色で透過させながら覆う（マスクさせる）CSS
ここは透過されないよ
Source Code
右上の「コピー」からご利用ください。
コピー
<div class="my-parts">
<p>ここは透過されないよ</p>
</div>コピー
.my-parts {
background: #FF8F00;
position: relative;
height: 300px;
}
.my-parts::before {
background: rgba(255, 255, 255, 0.8);
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.my-parts p {
text-align: center;
left: 0;
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
}
