0

我正在设计的网站上有一张带有透明文本覆盖的图像。

即使我的所有宽度和高度都为 100%，透明叠加层似乎比图像长几个像素。也没有边距或填充。

我花了最后半个小时试图弄清楚为什么它在那里，所以我可以摆脱它。任何帮助，将不胜感激。

注意：我使用的是响应式 CSS 框架，所以我不能使用任何绝对高度或任何东西

这是现场网站的链接：http: //fine-grain-2.myshopify.com/

这是HTML：

<div class="six columns alpha">
    <div class="thumb"> 
       <img src="http://cdn.shopify.com/s/files/1/0209/0122/products/MG_9507_large.jpg?348" alt="" />
       <div class="overlay">
           <a href="/products/the-bowden-brown-cherry">
           <h2>THE BOWDEN</h2>
           <h3>brown + cherry</h3>
           </a>
       </div>
    </div>                  
</div>

这是CSS：

#home img, a, .column, .columns {
    padding: 0;
    margin: 0;
    width: 100%;
}

#home .six.columns {
    padding-bottom: 40px;
    position: relative;
}

#home .six.columns.alpha {
    padding-right: 40px;
}

#home .six.columns .thumb {
    display: block;
    width: 100%px;
    height: 100%px;
    text-decoration: none;
    padding: 0;
    margin: 0;
    position: relative;

}

#home .six.columns .overlay {
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    width: 100%;
    height: 100%;
    text-decoration: none;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.75);
    margin: 0;
    padding: 0;
}

#home .six.columns .thumb:hover .overlay {
    opacity: 1;
}

#home .six.columns h2 {
    color: #FAFAFA;
    display: block;
    font-size: 1.8em;
    font-weight: lighter;
    letter-spacing: 0.3em;
    margin-top: 27%;
    text-align: center;
}

#home .six.columns h3 {
    color: #FAFAFA;
    display: block;
    font-size: 1em;
    font-weight: lighter;
    letter-spacing: 0.6em;
    text-align: center;
}
4

1 回答 1

3

刚设置display: block;为.thumb img。

于 2013-02-02T21:53:37.070 回答