CSS kullanarak nasıl "nakavt" etkisi elde edebilirsiniz?

Question

UPDATE - Bunu gayet iyi anladım. Kod biraz uzun, ama bir sayfayı buraya fırlattım, böylece kaynağı görüntüleyebilesiniz: http://www.sorryhumans.com/knockout-header

Konsept: http://algemeenbekend.nl/misc/challenge_gerben_v2.html ve benim ihtiyaçlar için uyarlanmıştır.

Başlık, yanıt vericidir ve devreden çıkarılmıştır. (Kötü, 1 dakika duyarlı bg görüntü uygulamalarını göz ardı ediniz!). Bu uygulama ayrıca herhangi bir CSS3 kullanmıyor, bu yüzden uyumlulukla ilgili birçok sorun olmayacağını hayal ediyorum.

Bulduğum tek sorun, tarayıcı genişliği tek sayı olduğunda (ör. 1393 piksel), sağ taraftaki sıvı sütunu ile ana merkez sütunu arasında 1 piksellik bir boşluk olduğu anlaşılıyor. Bu sorunu Firefox, Internet Explorer'ın en son sürümünde veya genişlik çift sayı olduğunda (örneğin, Chrome'da 1394 piksel) görmüyorum. Herhangi bir fikir?

Orijinal Soru: Ben tasarlanmış bir başlık kod denemeden, ama aradığım etkiyi elde anlamaya alamıyorum ediyorum. (Hayır, bu aslında ben :) sadece bir örnek üzerinde çalışıyorum ne değildir!) Ekli görüntüye bakınız

fotoğraf tam genişlikli duyarlı fotoğraftır. Üstbilgi tam genişlikte, ancak içeriği bazı rasgele boyutlarını (siyah çizgilerle gösterilen) aşmayan, ancak ölçeklendirilebilen duyarlı bir ızgara üzerindedir. Tüm bunları başarabilirim, ancak sorunum var, anlamaya çalıştığım şey, başlık çubuğunun, logonun nerede olacağı konusunda şeffaf olmasını sağlamaktır. Başka bir deyişle, logonun çubuğun üstünde olması yerine, başlığın "çıkarılması" isterim.

Bu mümkün mü?

Answer 1

Nakavt etkileri için içsel bir destek yok, bu nedenle metni bir görüntünün parçası olarak sahip olmanız gerekir.

Bunu yapmanın en kolay yolu, boşaltma efektinin arkasındaki görüntünün resmin katı kısmı olması olabilir. Kopyalama efektini istediğiniz yere sağlam bir arka plan ve saydamlık içeren bir .png oluşturabilir ve tüm üstbilgiyi kısmen saydam hale getirmek için css opacity kullanabilirsiniz. Üstbilgileri birden çok bölümle ayarlamanız gerekir, böylece görüntüler olmayan bölümler (siyah çubukların dışında) arka plan rengine sahip olurken, görüntülerin bulunduğu bölümler görünmez.

çok kabaca:

<div id="outerHeaderWithOpacity"> 
    <div class="hasBackground">Left side, will stretch</div> 
    <div class="noBackground">Image(s) go here</div> 
    <div class="hasBackground">As many sets as you need</div> 
    <div class="noBackground">Image(s) go here</div> 
    <div class="hasBackground">Right side, will stretch</div> 
</div> 

Answer 2

http://jsfiddle.net/GZ8Xv/

değil güzel çözüm ancak deney CSS3 FlexBox kullanılarak: (yedek display: table ile)

<div class="wrapper"> 
    <div class="left"><br /></div> 
    <div class="middle"><br /></div> 
    <div class="right"><br /></div> 
</div> 

.left, .right 
{ 
    height:100%; 
    border: 1px solid black; 
    display:table-cell; 
    display: -webkit-flexbox; 
    display: -moz-flexbox; 
    display: -ms-flexbox; 
    display: -o-flexbox; 
    -webkit-flex: 1; 
} 

.middle 
{ 
    display: table-cell; 
    display: -webkit-flexbox; 
    width: 500px; 
    height:100%; 
    border: 1px solid blue 
} 

.wrapper 
{ 
    display: table; 

    display: -webkit-flexbox; 
    display: -moz-flexbox; 
    display: -ms-flexbox; 
    display: -o-flexbox; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    -ms-box-orient: horizontal; 
    -o-box-orient: horizontal; 
    width: 100%; 
    height: 100px; 
} 

LÜTFEN DİKKAT: flexbox w3c spec hala akıştadır ve üçüncü kez değişebilir. Bunu sadece IE9'da (IE9 ve IE8 modlarında) test ettim.IE7 modunda çalışmaz ve Chrome 20 ve 22

Birkaç küçük değişiklik: http://jsfiddle.net/GZ8Xv/2/ ve 5 div düzeninizi javascript olmadan alırsınız.