我們的用法就是: mix-blend-mode: screen;
<div class="image-container">
<div class="text">NATURE</div>
</div>
很簡單就只是兩個div。
一個放圖片,一個寫文字。
就很基本,只要把圖片放在背景就可以了。
.image-container {
background-image: url("img_nature.jpg");
background-size: cover;
position: relative;
height: 300px;
}
.text {
background-color: white;
color: black;
font-size: 10vw;
font-weight: bold;
margin: 0 auto;
padding: 10px;
width: 50%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: screen;
}
CSS的世界真的是很大很廣闊,有時候一句關鍵的語法就可以達到很讚的效果!