Wie kann ich Text in div niedrigen Opazität in HTML

6

Die CSS-Eigenschaft mix-blend-mode werden Sie den Effekt geben Sie suchen (es kann nicht sein, erreicht mit nur opacity). SVG ist nicht erforderlich, wenn Sie keine Internet Explorer-Unterstützung benötigen. Diese Lösung ist kompatibel mit Chrome, Firefox, Safari, Opera und anderen (siehe Kompatibilitätstabelle here).

Live Demo:

html, body { 
 
    margin: 0; 
 
} 
 

 
.mix { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 140px; 
 
    height: 100px; 
 
    font-size: 80px; 
 
    color: white; 
 
    padding: 20px; 
 
    margin: 10px; 
 
    background-color: black; 
 
    mix-blend-mode: multiply; 
 
    opacity: 0.8; 
 
}

<img src="http://i.imgur.com/5LGqY2p.jpg?1"> 
 
<div class="mix"> 
 
Text 
 
</div>

Quelle

2016-04-15 01:03:51

1

hinzufügen Opazität für Eltern div und der Text innerhalb des div wird trage die Opazität. In Ihrem Beispiel hat der Elterncontainer einen Hintergrund und dann einen weiteren Container, in dem der Text eine andere Farbe hat als der Div-Hintergrund.

.main { 
 
    width: 350px; 
 
    height: 250px; 
 
    background-image: url(http://i.stack.imgur.com/GgQ5e.jpg); 
 
} 
 
.container { 
 
    opacity: 0.5; 
 
    background-color: black; 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
p { 
 
    font-size: 100px; 
 
    color: white; 
 
    opacity: .3; 
 
}

<div class="main"> 
 
    <div class="container"> 
 
    <p> 
 
     TEXT 
 
    </p> 
 
    </div> 
 
</div>

Quelle

2016-04-14 23:04:33

1

Diese scheinbar in CSS getan werden kann, Text Maskierung. (Siehe https://css-tricks.com/how-to-do-knockout-text/) Es ist jedoch mehr Cross-Browser-freundlich, es mit SVG zu tun.

<svg> 
    <pattern id="pattern" patternUnits="userSpaceOnUse" width="750" height="800"> 
    <image width="750" height="800" xlink:href="image.jpg"></image> 
    </pattern> 
    <text x="0" y="80" class="headline" style="fill:url(#pattern);">background-clip: text | Polyfill</text> 
</svg>

aus der CSS-Tricks Website

Quelle

2016-04-14 23:08:24 user3413723

+0

Wie kann ich das mit SVG tun? –

+0

Überarbeitete Antwort, um zu erklären, wie es geht. – user3413723

+0

SVG ist eine Möglichkeit, es zu tun, aber es kann definitiv auch mit CSS getan werden. –

0

Was für Sie fragen, mit nur Undurchsichtigkeit scheint nicht möglich. Wenn Sie die Deckkraft des Texts verringern, wird das Elternelement und was immer sich hinter dem Elternelement befindet abhängig von der Deckkraft des übergeordneten Elements und so weiter. Sie scheinen jedoch zu wollen, dass die volle Transparenz das Elternelement des Elternelements erreicht, während das Elternelement seine eigene unterschiedliche Deckkraft außerhalb des Textes behält.

Dafür müssen Sie Clip-Pfad verwenden.

Die beste Cross-Browser-Unterstützung scheint für SVG clip-path for SVG elements zu sein. Aber schau dir den Artikel CodePen/CSS-Tricks selbst an, um weitere Optionen zu sehen, die du für diesen Effekt hast.

Schauen Sie sich den folgenden Code:

.item--svg-clip-path-svg image { 
 
    clip-path: url(#clipping); 
 
} 
 
.demo, 
 
#clipping, 
 
#masking text { 
 
    font: bold italic 7em/1.5 Georgia; 
 
} 
 
/* Common 
 
------------------------------------------- */ 
 

 
BODY { 
 
    font: 12px/1.4"Trebuchet MS", Arial, sans-serif; 
 
} 
 
A { 
 
    color: tomato; 
 
} 
 
H1, 
 
H2, 
 
H3, 
 
H4 { 
 
    margin-bottom: 1rem; 
 
    font-family: Georgia, serif; 
 
    line-height: 1.4; 
 
} 
 
H1 { 
 
    position: relative; 
 
    margin-bottom: 2rem; 
 
    padding-bottom: 1rem; 
 
    border-bottom: 1px solid #CCC; 
 
    text-align: center; 
 
    text-shadow: 1px 1px 0 white, 2px 2px 0 #555; 
 
    font-size: 4em; 
 
    font-style: italic; 
 
} 
 
H1:after { 
 
    content: "Live demo"; 
 
    position: absolute; 
 
    margin-left: 5px; 
 
    padding: 1px 5px; 
 
    vertical-align: top; 
 
    border-radius: 5px; 
 
    background: paleturquoise; 
 
    white-space: nowrap; 
 
    text-shadow: none; 
 
    font-size: 1rem; 
 
    color: #FFF; 
 
} 
 
H2 { 
 
    padding-bottom: .3rem; 
 
    border-bottom: 1px solid #333; 
 
    font-size: 2.8em; 
 
    color: #333; 
 
} 
 
H3 { 
 
    text-shadow: 1px 1px 0 white, 2px 2px 0 #CCC; 
 
    font-size: 2.5em; 
 
    font-style: italic; 
 
    color: #777; 
 
} 
 
H4 { 
 
    font-size: 1.6em; 
 
    font-style: italic; 
 
    color: #999; 
 
} 
 
code { 
 
    display: block; 
 
    position: relative; 
 
    margin-bottom: 1rem; 
 
    overflow: auto; 
 
    max-width: 90%; 
 
    padding: 35px 10px 7px; 
 
    border-radius: 5px; 
 
} 
 
.comment code { 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 2px 5px; 
 
    vertical-align: middle; 
 
    background: #EEE; 
 
    color: #777; 
 
} 
 
code:before { 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    height: 25px; 
 
    line-height: 25.2px; 
 
    padding-left: 10px; 
 
    position: absolute; 
 
    font-weight: bold; 
 
    font-style: italic; 
 
} 
 
.comment code:before { 
 
    content: none; 
 
} 
 
.code--css { 
 
    background: #f7edba; 
 
} 
 
.code--css:before { 
 
    content: "CSS"; 
 
    background: #f2e18c; 
 
    color: #8a750f; 
 
} 
 
.code--svg { 
 
    background: #e6f4be; 
 
} 
 
.code--svg:before { 
 
    content: "SVG"; 
 
    background: #d6ec93; 
 
    color: #678217; 
 
} 
 
.svg-defs { 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
} 
 
.wrapper { 
 
    width: 90%; 
 
    min-width: 500px; 
 
    max-width: 800px; 
 
    margin: 0 auto; 
 
    padding: 2rem 0; 
 
    conter-reset: mylist; 
 
} 
 
.wrapper:after { 
 
    content: ''; 
 
    display: table; 
 
    width: 100%; 
 
    clear: both; 
 
} 
 
.item { 
 
    position: relative; 
 
    margin-bottom: 2em; 
 
    padding-bottom: 2em; 
 
    padding-right: 3em; 
 
    border-bottom: 1px solid #DDD; 
 
    counter-increment: mylist; 
 
} 
 
.item:before { 
 
    content: counter(mylist); 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    font: 2rem/1 Georgia, serif; 
 
    color: #EEE; 
 
} 
 
.item:after { 
 
    content: ''; 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.demo { 
 
    position: relative; 
 
    float: left; 
 
    margin-right: 30px; 
 
} 
 
.demo:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    z-index: -2; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: url(http://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg) no-repeat; 
 
    opacity: 0; 
 
    transition: .7s; 
 
} 
 
.item:hover .demo:before { 
 
    opacity: .4; 
 
} 
 
.text { 
 
    padding-left: 230px; 
 
} 
 
/* Browsers 
 
------------------------------- */ 
 

 
.browsers { 
 
    margin-top: 1.5rem; 
 
} 
 
.browser { 
 
    display: inline-block; 
 
    opacity: .2; 
 
} 
 
.has-support { 
 
    opacity: 1; 
 
} 
 
.browser:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 24px; 
 
    height: 24px; 
 
    margin-right: 7px; 
 
    background: url(http://yoksel.github.io/assets/img/sprite-browsers.png) 0 0 no-repeat; 
 
    vertical-align: middle; 
 
} 
 
.firefox:before { 
 
    background-position: 0 0; 
 
} 
 
.chrome:before { 
 
    background-position: -30px 0; 
 
} 
 
.safari:before { 
 
    background-position: -60px 0; 
 
} 
 
.ie8:before { 
 
    background-position: -90px 0; 
 
} 
 
.ie9:before { 
 
    background-position: -90px 0; 
 
} 
 
.opera-13:before { 
 
    background-position: -120px 0; 
 
} 
 
.opera-12:before { 
 
    background-position: -150px 0; 
 
} 
 
.opera-mob:before { 
 
    background-position: -150px 0; 
 
} 
 
.opera-mini:before { 
 
    background-position: -150px 0; 
 
}

<svg class="svg-defs"> 
 
    <defs> 
 
    <clipPath id="clipping"> 
 
     <polygon id="Star-1" points="98.4999978 153.75 38.2520165 185.424245 49.7583542 118.337123 1.01670635 70.8257603 68.3760155 61.037872 98.5000012 1.1379786e-14 128.624005 61.0378871 195.98331 70.8258091 147.241642 118.337136 158.747982 185.424247" /> 
 
     <text x="0" y="3.2em">Text</text> 
 
    </clipPath> 
 
    <image xlink:href="http://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" width="200" height="300" /> 
 
    </defs> 
 
</svg> 
 

 

 
<div class="item item--svg-clip-path-svg"> 
 
    <div class="demo"> 
 
    <svg width="200" height="300"> 
 
     <image xlink:href="http://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" width="200" height="300" /> 
 
    </svg> 
 
    </div> 
 
    <div class="text"> 
 
    <h3>SVG clip-path for SVG elements</h3> 
 
    <a href="http://www.w3.org/TR/SVG11/masking.html#EstablishingANewClippingPath">Specification</a> 
 
    <br /> 
 
    <br /> 
 
    <code class="code--svg"><pre>&lt;clipPath id="clipping"> 
 
    &lt;polygon points="98.4999978 153.75..."/> 
 
&lt;/clipPath></pre></code> 
 
    <code class="code--css"><pre>.item { 
 
    clip-path: url(#clipping); 
 
    }</pre></code> 
 
    <ul class="browsers"> 
 
     <li class="browser chrome has-support"></li> 
 
     <li class="browser safari has-support"></li> 
 
     <li class="browser opera-13 has-support"></li> 
 
     <li class="browser firefox has-support"></li> 
 
     <li class="browser ie9 has-support"></li> 
 
     <li class="browser opera-12 has-support"></li> 
 
    </ul> 
 
    </div> 
 
</div>

Referenz: css-tricks

Quelle

2016-04-14 23:20:28 timolawl

Wie kann ich Text in div niedrigen Opazität in HTML

Antwort

Verwandte Themen