CSS中带有透明文本的Div？

Question

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

有其他叠加层和图像，使用静态图像很麻烦。此外，我怀疑我需要能够随着浏览器窗口大小的变化来缩放背景。

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

这需要在IE8、9和FF 4中工作。我可以为旧版浏览器退回到其他效果。

有什么建议吗？

- rboarman

---

以前没见过使用 CSS 实现这个效果，我会使用带有透明文本的图片。你仍然可以让它与背景图片一起缩放。 - 472084

与设计师合作可以很有趣，但他们有时会强调某些事情。他们最喜欢的说法是：“只需使用Flash。” - rboarman

你可以使用一个透明的、限定大小的gif/png图片作为文本的背景，而将背景设置为绿色。然后在CSS中使用相同的颜色作为元素的背景，以帮助格式化位置。这样就可以拥有一个动态大小的背景，但保留文本透明区域。 - Joseph Marikle

这需要在IE8中工作 = 那就放弃HTML5/CSS3解决方案的梦想吧。 - DA.

或者，我忘记的一个选项是使用<canvas>。 - 472084

Answer 1

这种效果可以通过使用CSS 3 图片遮罩来实现。然而，目前只有Webkit支持该属性。我会先实现类似的效果，然后对于其他浏览器使用备用方案，直到所有人都跟上速度。

另外一点：你还可以通过使用ChromeFrame或类似的东西来增加CSS的采用率。

那个链接中的一个示例：

SVG images can be used as masks. For example, a partially transparent circle can be applied as a mask like so:

<img src="kate.png" style="-webkit-mask-image: url(circle.svg)">

- Michael Jasper

Answer 2

我最终使用了两张没有任何孔洞或透明度的图像。这是一个技巧，但在所有浏览器中都能正常工作。

- rboarman

Answer 3

如果您能够使用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

- Sarathlal N

Answer 4

HTML5或类似于PHP GUI的GPD。但是HTML5不适用于IE8或更早版本，至少如果客户端没有Google公司的Chrome框架。

- Leandro Bardelli

---

是的，对我来说，HTML5的采用率还不够高，无法使用。 - rboarman

你会在HTML5中使用什么特定的功能？ - mlhDev

请忽略此答案，它是2011年9月的信息。 - Leandro Bardelli