如何使 div 中的文本在 HTML 中降低不透明度 [关闭]

Posted 2023-03-06

【中文标题】如何使 div 中的文本在 HTML 中降低不透明度 [关闭]

【英文标题】：How do I make text in div lower opacity in HTML [closed]

【发布时间】：2016-08-06 17:37:25

【问题描述】：

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

【问题讨论】：

对于 webkit，你可以使用：-webkit-background-clip: text; -webkit-text-fill-color：透明；

这是假设他想回到“在 IE 中查看最佳”的日子，并且此效果仅适用于 -webkit- 浏览器。

【参考方案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>

【参考方案2】：

这显然可以使用文本掩码在 css 中完成。 （请参阅https://css-tricks.com/how-to-do-knockout-text/）不过，使用 SVG 更适合跨浏览器。

<svg>
  <pattern id="pattern" patternUnits="userSpaceOnUse"  >
    <image   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 网站

【讨论】：

我如何用 SVG 做到这一点？

修改后的答案来解释如何做到这一点。

SVG 是一种实现方式，但也可以使用 CSS 来实现。

【参考方案3】：

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

为此，您需要使用剪辑路径。

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


<div class="item item--svg-clip-path-svg">
  <div class="demo">
    <svg  >
      <image xlink:href="http://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg"   />
    </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

【参考方案4】：

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