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

Question

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

这可能吗？

基本上,它是一个白色的盒子,背面有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，它的宽度与其白盒容器的宽度完全相同。

\n\n

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

\n\n

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

\n\n

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

\n\n

HTML：

\n\n

<div id="content-wrap">\n    <div id="content">\n      Lorem ipsum dolor sit amet.\n    </div>\n\n    <img id="the-image" src="http://img220.imageshack.us/img220/4051/62739191.png" alt="" />\n\n    <div id="footer">\n      Lorem ipsum dolor sit amet.\n    </div>\n</div>\xe2\x80\x8b\n

\n\n

CSS：

\n\n

html {\n    background: url(\'http://placekitten.com/850/850\') repeat top left;\n}\n\n\n#content-wrap {\n    width: 200px;\n    margin: 0px auto;\n}\n\n#content,\n#footer {\n    background: url(\'http://img267.imageshack.us/img267/2733/21138012.png\')repeat top left;\n}\n\n#the-image { width: 100%; display: block; }\n

\n\n

与其他方法相比，此方法的一个巨大优势是它确保了广泛的浏览器兼容性。当今最新版本的 Firefox、Safari、Chrome 和 IE 在使用透明 PNG 时都应以相同的方式处理此问题。此外，如果优先考虑 IE 兼容性，则有多种方法可以使其在 IE6 之前也能正常工作：

\n\n

\n
• http://www.jacklmoore.com/notes/ie-transparency-problems
\n
• http://allinthehead.com/retro/338/supersleight-jquery-plugin
\n

\n