問題襯底底部陰影與橫幅圖像

我想線這個底部陰影作爲在頂部的陰影，但我似乎無法得到firgured了。它崩潰的唯一時間是當我使用開發人員工具欄在css文件中進一步刪除行高或字體大小時，但當然這也會影響其他所有內容。這裏是我的基本的HTML結構：問題襯底底部陰影與橫幅圖像

<div class="banner-image"> 
    <div class="banner-image-wrapper"> 
    <div class="shadow-top"></div> 
     <a class="header-image"> 
     <img /> 
     </a> 
    <div class="shadow-bottom"></div> 
    </div> 
</div>

在標籤，如果我刪除字體大小和行高，一切都很好地坍塌在自身上，但我似乎無法迫使這只是在標籤上。

我知道一旦它解決了，這將是一個荒謬的問題。

謝謝！

enter image description here

來源

2012-09-24 SixfootJames

你可以發佈你的CSS？如果沒有它，很難解決CSS問題:) – Kyle

其實答案很簡單，你只需要使用一些巧妙的定位&拿父母的盒子模型的優勢：

.banner-image{ 
    position:relative; 
} 

.shadow-bottom{ 
    position:absolute; 
    height: x; 
    bottom: -x; 
}

這裏有您需要的公式：

取底部陰影的高度（一些值爲x）
然後m請確保該元素的父級具有「相對」位置（〜重要〜）
使底部陰影'絕對'的位置
將它放在底部減去它的高度值（-x）

這裏有一個的jsfiddle說明效果：http://jsfiddle.net/k7CmJ/

來源

2012-09-24 09:05:49

或者有絕對定位;）謝謝Vita – SixfootJames

歡迎您！：）樂意效勞！ –

我知道這是舊的，但對於其他人尋找一個答案，這裏絕對定位將無法正常工作，設置顯示：在IMG塊標籤將擺脫該空間：

.header-image > img { 
    display:block; 
}

通常情況下，圖像是嵌入塊，並且由於它是內聯的，所以它周圍的空白被保留。

這裏的問題是：http://jsfiddle.net/3Kd3f/

這裏是完全相同的代碼，只顯示：塊添加到img標籤：http://jsfiddle.net/3Kd3f/1/

來源

2012-10-25 14:02:33 Wil

問題襯底底部陰影與橫幅圖像

回答

相關問題