2016-09-23 8 views
-1

Stellen Sie sich vor: Es ist ein Hintergrund zugeordnet "Körper" und ein weißes "div" mit einem Text darin. Und dieser Text ist so, dass wir den Hintergrund sehen können. Wie implementiert man das mit CSS? So: enter image description hereSo erstellen Sie transparenten Text auf nicht transparentem Hintergrund

+2

Sollen wir Ihr Versuch haben? –

+1

Könnten Sie bitte einen Code oder ein Beispiel zeigen? – aavrug

+0

Ich denke, das ist ein Duplikat von [http://stackoverflow.com/questions/10835500/how-to-change-text-transparency-in-html-css](http://stackoverflow.com/questions/10835500/ how-to-change-text-transparenz-in-html-css) – Corporalis

Antwort

2

können Sie SVG verwenden diese zu erstellen und anwenden mask

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background: url('http://blog.oxforddictionaries.com/wp-content/uploads/mountain-names.jpg'); 
 
    background-size: cover; 
 
    height: 100vh; 
 
    background-position: center; 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 

 
svg { 
 
    width: 300px; 
 
    height: 100px; 
 
} 
 
svg text { 
 
    text-anchor: middle; 
 
} 
 
svg #overlay { 
 
    fill: white; 
 
    opacity: 0.7; 
 
} 
 
svg #text { 
 
    font-size: 40px; 
 
    font-weight: bold; 
 
} 
 

 
svg #r { 
 
    fill: white; 
 
    mask: url(#mask); 
 
}
<svg> 
 
    <defs> 
 
    <mask id="mask" x="0" y="0" width="100%" height="100%"> 
 
     <rect id="overlay" x="0" y="0" width="100%" height="100%" /> 
 
     <text id="text" x="50%" y="0" dy="65px">LOREM ISPUM</text> 
 
    </mask> 
 
    </defs> 
 
    <rect id="r" x="0" y="0" width="100%" height="100%" /> 
 
</svg>

0

Opazität verwenden;

html:

<body> 
    <div class='frontimage'> 

    </div> 
</body> 

css:

body{ 
    background-image: url("yourimage.jpg"); 
} 
.frontimage{ 
    background-image: url("yourotherimage.jpg"); 
    opacity: 0.5; 
} 
0

mit CSS Sie Opazität verwenden: 0,6; (0 = voll transparent - 1 = voll sichtbar).

*{font-family:Helvetica, Arial, Sans-Serif;} 
 
.background{background:url(http://www.paisajesbonitos.org/wp-content/uploads/2015/11/paisajes-bonitos-de-oto%C3%B1o-lago.jpg);} 
 
.text{font-size: 5em; font-weight:bold; opacity:0.6;}
<div class="background"> 
 
<span class="text"> 
 
    Lorem ipsum 
 
</span> 
 
</div>

mit Photoshop können Sie die Nachfüllung bar Textschicht verringern oder Transparenz dieser Schicht erhöhen. enter image description here

Verwandte Themen