[英]background rollover on responsive image using CSS
我正在嘗試使用CSS3和bootstrap3在響應圖像上產生覆蓋效果。 問題在於,翻轉會產生覆蓋背景,該背景適用於頁邊距,因此比圖像本身大。
這是我的html:
<div class="col-sm-6 col-md-4 col-lg-3">
<figure>
<a href="#">
<img class="img-responsive" src="img/portfolio/prw-4.jpg">
</a>
</figure>
</div>
和CSS:
#portfolio figure a:after {
content:'Text';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 1s;
-webkit-transition: all 1s;
background: rgba(0,0,0,0.7);
color: #FFF;
text-align: center;
padding: 60px 0;
}
#portfolio figure a:hover:after {
opacity:1;
}
有人有建議嗎? 謝謝
您可以考慮使用box sizing,因為您已經在使用“實驗性” css3。這里有一篇不錯的文章: Box Sizing | CSS-Tricks
所以基本上說:
* {
-moz-box-sizing: border-box; /* Firefox 1, probably can drop this */
-webkit-box-sizing: border-box; /* Safari 3-4, also probably droppable */
box-sizing: border-box; /* Everything else */
}
在您的CSS中,這也許可以為您解決。 祝好運。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.