如何使用CSS實現「挖空」效果？

更新 -很確定我明白了這一點。代碼有點長，但我在這裏扔了一頁，所以你可以查看源代碼：http://www.sorryhumans.com/knockout-header 如何使用CSS實現「挖空」效果？

這個概念是基於：http://algemeenbekend.nl/misc/challenge_gerben_v2.html，然後適應我的需要。

標題響應並被敲除。（請忽略不好的1分鐘響應bg圖像實現！）。這個實現也不使用任何CSS3，所以我會想象不會有很多兼容性問題。

我發現的唯一問題是，當Chrome瀏覽器的寬度是奇數（例如1393px）時，右側流體列和主中心列之間有1px的間隔。在Firefox，Internet Explorer的最新版本或寬度爲偶數時（例如Chrome中的1394px），我沒有看到此問題。有任何想法嗎？

原問題： 我試圖編碼我設計的標題，但無法弄清楚如何得到我正在尋找的效果。請看附加的圖像（不，這其實不是什麼我工作:)只是一個例子！）

example picture

的照片是一個全寬響應性光。標題爲全角，但其內容位於不超過任意大小（由黑線顯示）的響應網格上，但可縮小。我可以完成所有這些，但是我很難搞清楚如何使標題欄在標識所在的位置是透明的。換句話說，我不想將標誌放在酒吧的頂部，而是想要將標題「敲出來」。

這甚至可能嗎？

來源

2012-07-04 Sean Linehan

使用'.png'是最簡單的方法，尤其是徽標。 – thirtydot

@Sean你有什麼嘗試？玩具看着css「不透明」嗎？ –

使用圖像是我能想到的唯一方法。 [這篇文章]（http://stackoverflow.com/a/7626738/1405830）似乎同意，但也提到SVG作爲替代。我有興趣知道是否有另一種方法。 – Zhihao

對於挖空效果沒有內在的支持，所以您必須將文本作爲圖像的一部分。

最簡單的方法就是讓背景背後的背景效果成爲圖像的固體部分。您可以創建一個具有堅實背景和透明度的.png，您需要挖空效果，並使用css opacity使整個標題部分透明。您需要設置包含多個部分的標題，以便不是圖像的部分（即黑條之外）具有背景顏色，而帶圖像的部分則不具有背景顏色。

非常粗略：

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

來源

2012-07-04 00:32:41 CheeseWarlock

這就是我粗略的想法，但我無法弄清楚CSS會是什麼樣子。參考原始圖像，黑色條之間的標題區域應該保持居中，而不管屏幕大小如何。你能幫我把那部分弄清楚嗎？非常感謝您的幫助！ –

@SeanLinehan你可以使用jQuery來設置寬度[與此類似的東西]（http://jsfiddle.net/VPU9A/），但其他答案中的flexbox方法似乎更優雅。 – CheeseWarlock

http://jsfiddle.net/GZ8Xv/

不是最漂亮的解決方案，但利用實驗CSS3 Flexbox的：（帶display: table回退）

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

請注意： flexbox w3c規範仍處於不斷變化之中，可能會第三次發生變化。我只在IE9中測試過（IE9和IE8模式）。不能在IE7模式下工作）和Chrome 20和22

一些小的變化：http://jsfiddle.net/GZ8Xv/2/，你有你的5 div佈局沒有JavaScript。

來源

2012-07-04 02:04:55

非常感謝您花時間幫忙！我想我找到了一個體面的解決方案，不使用CSS3，如果您有興趣，我已經更新了原始帖子。 –

@SeanLinehan很高興你找到答案。將解決方案作爲答案發布並將其標記爲已接受將是一件好事。這樣其他人可以更容易地找到你的解 –

如何使用CSS實現「挖空」效果？

回答

相關問題