Es ist möglich, dies in reinem HTML 5

Question

Ich brauche zu erstellen this effect in HTML "Colhemos ideias, semeamos futuro ..."

Ist das möglich zu schaffen?

Im Grunde ist es ein weißes Feld mit 0,7 Opazität und ein Hintergrundbild dahinter. Der Text muss in der weißen Box sein, aber die Buchstaben müssen als Maske dienen, damit das Hintergrundbild durch sie hindurchgehen kann.

Answer 1

Ich würde ein transparentes PNG verwenden, wo es genau die gleiche Breite hat wie sein weißer Kasten.

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

wählte ich auch mit der Transparenz zwischen dem Textbild und Behälter keine Unterschiede zu vermeiden, eine Wiederholung transparenten PNG-Bild für den Hintergrund des weißen Kasten zu verwenden.

Alternativ können Sie opacity: o.8 in #content verwenden und #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; } 

Ein großer Vorteil dieser Methode gegenüber anderen ist, dass es breite Browser gewährleistet Kompatibilität. Die neuesten Versionen von Firefox, Safari, Chrome und IE sollten dies bei transparenten PNGs genauso handhaben. Auch wenn IE Kompatibilität eine Priorität ist, gibt es Möglichkeiten für so weit zurück, wie IE6 diese Funktion zu erhalten:

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

Answer 2

Dies ist (theoretisch) mit Bildmasken möglich, die im Moment noch nicht Teil der offiziellen Normen sind. Momentan sind Masken nur in Webkit-Engines verfügbar.

Unterstützung: http://caniuse.com/#search=mask

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

Anders als das aus der Spitze von meinem Kopf, ich glaube nicht, ist es möglich, mit reinem CSS + HTML5.

In Bezug auf Ihr Beispiel ... Ich denke, das ist nur eine transparente .png.