CSS在白色背景的翱翔变暗

Question

深色背景上的照片

悬停（右）

白色背景上的照片

悬停（错误）

我也想让它在白色背景上变暗。

CSS

.photo
  background: no-repeat center center
  background-size: cover
  border-radius: 5px
  width: 100%
  height: 310px 
  position: relative
  box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.65)
  &:hover
    background-color: #000
    opacity: 0.5

HTML

<%=link_to p do %>
    <div class="photo smalled" style="background-image: url(<%=backdrop(p, 'w300')%>)">

        <div class="rating text-right">
            <%=starsrating p.rating%>
        </div>
        <div class="overlay">
            <div class="text-left">
                <h6><%=p.title%></h6>
                <h4>
                    <small>
                        <strong><%=p.nextSchedule.channel.name%></strong>
                         <%=l p.nextSchedule.start, :format => :short%>
                    </small>
                </h4>
            </div>
        </div>
    </div>
<% end %>

Answer 1

实现此目标的一种方法是创建一个位于.photo <div>顶部的伪元素。它首先是透明的，然后当你悬停在.photo <div>上时，它的背景会变成半透明的黑色（可以通过使用rgba或设置不透明度来完成）。

.photo {
  background: no-repeat center center;
  background-size: cover;
  border-radius: 5px;
  width: 100%;
  height: 310px;
  position: relative;
  box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.65);
  &:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    border-radius: 5px;
  }
  &:hover {
    &:after {
      background: rgba(0,0,0,0.3); 
    }
  }
}

<强> http://jsbin.com/ePiGuha/2/edit

当然，这个元素将覆盖位于div内部的元素。因此，您可能需要将这些元素设置为相对并控制z-index。