使用 CSS 对响应式图像进行背景翻转答案

【问题标题】：background rollover on responsive image using CSS使用 CSS 对响应式图像进行背景翻转
【发布时间】：2014-06-03 12:13:20
【问题描述】：

我正在尝试使用 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;
}

有人有建议吗？谢谢

【问题讨论】：

标签： html css responsive-design twitter-bootstrap-3 rollover-effect

【解决方案1】：

您可以考虑使用盒子大小，因为您已经在使用“实验性”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 中，这可能会为您解决问题。祝你好运。

【讨论】：