How to create semi-translucent text like in beginning of that website https://superscene.pro/ I really wonder how to make text stay with define color and become translucent when there is object behind it ? Maybe someone can give tips on how to make dragging of object like on that website
How to make translucent text in CSS?
103 views Asked by Dmitrii Sokolov At
3
There are 3 answers
0

From looking at their source in the CSS, it appears to be coming from the following rule:
mix-blend-mode: exclusion;
Adding this rule should do what you desire. If you want more information, I recommend looking here: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
0

You can use css mix-blend-mode
on text container or in text itself and you can give color to text to give more details, more info here
.bg{
background-image:url('https://i.picsum.photos/id/866/400/400.jpg?hmac=oHJBlOQwtaF75oX43dFtPf4At_GRLEx9FQqkkfpLR5U');
background-size: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.blend{
mix-blend-mode: exclusion;
color: white;
display: block;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
font-size: 6rem;
}
<div class="bg">
<div class="blend">
<p>This ts text</p>
</div>
</div>
You can do this using:
You know, there is something called "inspector" where you can see styles and edit tags about the document. The inspector looks like this: