thể của nó để tạo ra này trong html tinh khiết 5

Question

tôi cần phải tạo this effect trong HTML "Colhemos ideias, semeamos Futuro ..."

Đây có phải là có thể?

Về cơ bản, đó là một hộp màu trắng với opacity 0.7 và một hình nền đằng sau nó. Văn bản phải nằm trong hộp màu trắng, nhưng các chữ cái cần phải hoạt động như một mặt nạ để cho phép hình nền hiển thị qua chúng.

Answer 1

Tôi sẽ sử dụng PNG trong suốt có chiều rộng chính xác như hộp chứa hộp màu trắng của nó.

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

Tôi cũng đã chọn để sử dụng một lặp lại hình ảnh PNG trong suốt cho nền của hộp màu trắng để tránh bất kỳ sự khác biệt với tính minh bạch giữa các văn bản hình ảnh và bình chứa.

Ngoài ra, bạn có thể sử dụng opacity: o.8 trong #content và #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; } 

Một lợi thế rất lớn của phương pháp này hơn những người khác là nó đảm bảo trình duyệt rộng khả năng tương thích. Các phiên bản Firefox, Safari, Chrome và IE mới nhất của ngày hôm nay tất cả sẽ xử lý theo cách tương tự khi sử dụng PNG trong suốt. Ngoài ra, nếu khả năng tương thích trình duyệt IE là một ưu tiên, có nhiều cách để làm việc này cho như xa trở lại như IE6:

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

Answer 2

Điều này (về mặt lý thuyết) là có thể với mặt nạ hình ảnh, hiện tại vẫn không phải là một phần của tiêu chuẩn chính thức. Hiện tại, mặt nạ chỉ có sẵn trong các công cụ webkit.

hỗ trợ: http://caniuse.com/#search=mask

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

Khác hơn thế, ra khỏi đỉnh đầu của tôi, tôi không nghĩ rằng đó là có thể với CSS tinh khiết + HTML5.

Về ví dụ của bạn ... Tôi nghĩ đó chỉ là một minh bạch .png.