是否可以用纯html 5创建它

I need to create this effect in HTML "Colhemos ideias, semeamos futuro..."

我需要在HTML“Colhemos ideias, semeamos futuro…”中创建这种效果。

Is this possible?

这是可能的吗?

Basically, it's a white box with 0.7 opacity and a background image behind it. The text must be in the white box, but the letters need to act as a mask to allow the background image to show through them.

基本上，它是一个白色的框，不透明度为0.7，后面有一个背景图像。文本必须在白色框中，但字母需要作为一个面具，以便背景图像通过它们显示出来。

2 个解决方案

#1

I would use a transparent PNG where it's the exact same width as its white box container.

我会使用一个透明的PNG，它的宽度和它的白色盒子一样。

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

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

I also chose to use a repeating transparent PNG image for the background of the white box to avoid any differences with the transparency between the text image and its container.

我还选择在白色框的背景中使用重复的透明PNG图像，以避免与文本图像及其容器之间的透明度有任何不同。

Alternatively, you can use opacity: o.8 in #content and #footer

或者，您可以使用不透明度:o。在#content和#footer中

HTML:

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:

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; }

A huge advantage of this method over others is that it ensures wide browser compatibility. Today's latest versions of Firefox, Safari, Chrome, and IE should all handle this the same way when using transparent PNGs. Also, if IE compatibility is a priority, there are ways to get this working for as far back as IE6:

与其他方法相比，这种方法的一个巨大优势是它确保了广泛的浏览器兼容性。今天最新版本的Firefox、Safari、Chrome和IE在使用透明的PNGs时都应该使用同样的方式。另外，如果IE兼容性是优先考虑的，那么有很多方法可以让它在IE6的支持下工作。

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

#2

This (theoretically) is possible with image-masks, which at the moment are still not part of the official standards. At the moment, masks are only available in webkit engines.

这(从理论上)是有可能的，因为现在还不是官方标准的一部分。目前，口罩只能在webkit引擎中使用。

support: http://caniuse.com/#search=mask

支持:http://caniuse.com/搜索=面具

example: http://trentwalton.com/2011/05/19/mask-image-text/

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

Other than that, out of the top of my head, I don't think it is possible with pure CSS+HTML5.

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

Regarding your example... I think that's just a transparent .png.

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