5

我需要在 HTML "Colhemos ideias, semeamos futuro..."中创建这种效果

这可能吗？

在此处输入图像描述

基本上，它是一个不透明度为 0.7 的白框，后面有一个背景图像。文本必须在白框中，但字母需要充当掩码以允许背景图像通过它们显示。

4

2 回答 2

5

这（理论上）可以通过图像掩码实现，目前这还不是官方标准的一部分。目前，掩码仅在 webkit 引擎中可用。

支持：http ://caniuse.com/#search=mask

例如：http ://trentwalton.com/2011/05/19/mask-image-text/

除此之外，在我的脑海中，我认为纯 CSS+HTML5 是不可能的。

关于你的例子......我认为这只是一个透明的.png.

于 2012-04-27T11:36:12.960 回答
3

我会使用一个透明的 PNG，它的宽度与其白盒容器的宽度完全相同。

http://jsfiddle.net/lollero/mAQe4/

我还选择使用重复的透明 PNG 图像作为白框的背景，以避免文本图像与其容器之间的透明度出现任何差异。

或者，您可以使用opacity: o.8in#content和#footer

HTML：

<div id="content-wrap">
    <div id="content">
      Lorem ipsum dolor sit amet.
    </div>

    <img id="the-image" src="http://img220.imageshack.us/img220/4051/62739191.png" alt="" />

    <div id="footer">
      Lorem ipsum dolor sit amet.
    </div>
</div>​

CSS：

html {
    background: url('http://placekitten.com/850/850') repeat top left;
}


#content-wrap {
    width: 200px;
    margin: 0px auto;
}

#content,
#footer {
    background: url('http://img267.imageshack.us/img267/2733/21138012.png')repeat top left;
}

#the-image { width: 100%; display: block; }

与其他方法相比，这种方法的一个巨大优势是它确保了广泛的浏览器兼容性。当今最新版本的 Firefox、Safari、Chrome 和 IE 在使用透明 PNG 时都应该以相同的方式处理这个问题。此外，如果 IE 兼容性是一个优先事项，那么有一些方法可以让这个工作早在 IE6 中运行：

于 2012-04-27T13:04:17.780 回答