CSS中带有透明文本的div？答案

【问题标题】：Divs with transparent text in CSS?CSS中带有透明文本的div？
【发布时间】：2011-11-18 21:15:52
【问题描述】：

我被要求创建一个基于 CSS（非 HTML5）的网站，该网站有一个填充的 div，并在其下方显示一个图像。

还有额外的叠加层和其他图像，这使得使用静态图像变得很痛苦。另外，我怀疑我需要能够随着浏览器窗口大小的变化而缩放背景。

我意识到我可以创建 GROW 文本的图像并将其简单地放置在背景图像之上，但我更愿意看看这种效果是否可以“真正地”实现。

这需要在 IE8、9 和 FF 4 中工作。我可以回退到旧浏览器的另一种效果。

有什么建议吗？

【问题讨论】：

以前从未见过用 CSS 完成此操作，我会使用带有透明文本的图像。您仍然可以使其与背景图像一起缩放。
与设计师合作可能很有趣，但有时他们真的很努力。他们最喜欢的台词是“只使用 Flash”。
必须支持哪些浏览器？
我唯一能想到的就是戴口罩……但排队仍然很痛苦
"这需要在 IE8 中工作" = 然后放弃 HTML5/CSS3 解决方案的梦想。

标签： css html masking

【解决方案1】：

使用CSS 3 image masking 可以实现这种效果。但是，目前只有 webkit 支持该属性。我会实现这样的东西，然后对其他浏览器使用后备，直到每个人都跟上速度。

附带说明：您还可以使用 ChromeFrame 或类似的东西来增加 CSS 的采用率

来自该链接的示例：

SVG 图像可以用作遮罩。例如，部分透明 circle 可以像这样用作遮罩：
<img src="kate.png" style="-webkit-mask-image: url(circle.svg)">

【讨论】：

【解决方案2】：

我最终使用了两张没有任何孔或透明度的图像。这是一个 hack，但适用于所有浏览器。

【讨论】：

【解决方案3】：

html5 或类似 php gui 的 gpd。但是 html5 不支持 ie8 或之前的版本，至少如果客户端没有谷歌公司的 chrome 框架。

【讨论】：

是的，html5 还没有被采用，我无法使用它
您会使用 HTML5 中的哪些内容？
认为这个答案已经过时了，它是从 2011 年 9 月开始的

【解决方案4】：

如果您可以使用 mix-blend-mode 属性，那么有一个适用于所有现代浏览器的简单解决方案。

http://codepen.io/sajijohn/pen/OXEgkj

HTML

<h1>SUPER-FLY</h1>

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway:900);
*{
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
html, body {
  height: 100%;
  width: 100%;
}
body {
  background: url(http://unsplash.it/3200/1600?image=973) no-repeat no-repeat center center;
  background-size: cover;
}
h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: raleway, sans-serif;
  font-size: 80px;
  line-height: 60px;
  text-align: center;
  padding: 20px;
  /*/////////MAGIC//HERE////////*/
  background: #fff;
  color: #000;
  mix-blend-mode: color-dodge;
  /*////////////////////////////*/
}

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

【讨论】：