如何使文本在DIV較低的不透明度在HTML

Question

如何降低文本的不透明度爲div，像這樣：

Answer 1

的CSS屬性mix-blend-mode會給你你正在尋找的效果（它不能僅使用opacity）。如果您不需要Internet Explorer支持，則不需要SVG。此解決方案與Chrome，Firefox，Safari，Opera和其他版本兼容（請參閱兼容性表here）。

現場演示：

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>

Answer 2

添加不透明度父股利和股利中的文本也將帶上不透明度。在您的示例中，父容器具有背景，然後是其中的另一個容器，其中具有與div背景不同的顏色的文本。

.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>

Answer 3

這顯然可以利用CSS的文本掩蔽來完成。 （請參閱https://css-tricks.com/how-to-do-knockout-text/）儘管如此，使用SVG進行跨瀏覽器更友好。

<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> 

從CSS-招數網站

Answer 4

什麼你問的似乎並不可能只有不透明度。通過減少文本的不透明度，最終顯示的內容是父元素以及父元素後面的內容，具體取決於父級不透明度，依此類推。但是，您似乎希望透明度達到父級的父級，同時讓父級在文本之外保留其自己的不透明度。

爲此，您需要使用剪輯路徑。

最好的跨瀏覽器支持似乎是SVG clip-path for SVG elements。但請查看CodePen/CSS-Tricks文章，以瞭解其他選項。

看看下面的代碼：

.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>

參考：css-tricks