如何使 div 中的文本降低 HTML 中的不透明度

Question

如何降低 div 中文本的不透明度，如下所示：

Answer 1

为父级 div 添加不透明度，div 中的文本也将带有不透明度。在您的示例中，父容器有背景，然后在其中有另一个容器，其中文本颜色不同，不同于 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 2

这显然可以在 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-tricks 网站

Answer 3

您所要求的似乎仅靠不透明度是不可能的。通过降低文本的不透明度，最终显示出来的是父元素以及父元素后面的任何内容，具体取决于父元素的不透明度，等等。但是，您似乎希望完全透明到达父级的父级，同时让父级在文本之外保持自己不同的不透明度。

为此，您需要使用 clip-path。

最好的跨浏览器支持似乎是 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

Answer 4

CSS mix-blend-mode 属性将为您提供您正在寻找的效果（仅使用 opacity 无法实现）。如果您不需要 Internet Explorer 支持，则不需要 SVG。此解决方案与 Chrome、Firefox、Safari、Opera 等兼容（请参阅兼容性 table 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>

如何使 div 中的文本降低 HTML 中的不透明度

How do I make text in div lower opacity in HTML

html

css

svg

filter

clip-path