Question

我需要在HTML中创建this effect“Colhemos ideias，semeamos futuro ......”

这可能吗？

enter image description here

基本上，它是一个白色的盒子，背面有0.7不透明度和背景图像。文本必须位于白色框中，但字母需要充当遮罩，以允许背景图像通过它们显示。

Answer 1

这（理论上）可以使用图像蒙版，目前这仍然不是官方标准的一部分。目前，掩码仅在webkit引擎中可用。

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

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

除此之外，我不认为使用纯CSS + HTML5是不可能的。

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

Answer 2

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

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

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

或者，您可以在opacity: o.8和#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上工作：

是否可以在纯HTML 5中创建它

2 个答案: