Is it possible to create this in pure html 5

Question

I need to create this effect in 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.

Answer 1

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.

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

example: 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.

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

Answer 2

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

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.

Alternatively, you can use opacity: o.8 in #content and #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; }

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:

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