JSFiddle - React, Tailwind, and code Playground

by Manuel Camacho

HTML

</pre>
<div class="container">

<div class="2background">
</div>
<h1 class="text">La historia sin fin, Texto de prueba para ver la transparencia del texto escrito en estas lineas que se acaban de escribir.</h1>

<h1 contentEditable role='textbox' aria-multiline='true' style="background-color: #000;color: white;mix-blend-mode: multiply; cursive;text-align: center;font-family: arial, serif;">La historia sin fin, Texto de prueba para ver la transparencia del texto escrito en estas lineas que se acaban de escribir.</h1>

<pre>

CSS

.container {
    background: url(https://cdnmaz.vicampuzano.com/wp-content/uploads/2015/06/videos-fondo-web-1140x713.jpg) 50%/ cover;
    padding: 10px;
}
 
.text {
color: transparent;
background-color:#000;
-webkit-text-stroke: 1px black;
font-family: "arial", serif;
font-size: 250%;
}

.background {
    width: 600px;
    height: 100px;
    background-color: #FFFFFF;
    position:fixed;
    z-index:100;

}

.trans {
    opacity: 0.5;
}