Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/38.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
CSS在白色背景上悬停时变暗_Css - Fatal编程技术网
Fatal编程技术网
  • css/
  • CSS在白色背景上悬停时变暗

CSS在白色背景上悬停时变暗

css

CSS在白色背景上悬停时变暗,css,Css,深色背景上的照片 悬停（右） 白色背景的照片 悬停（错误） 我希望它在白色背景上也是深色的 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) &

深色背景上的照片

悬停（右）

白色背景的照片

悬停（错误）

我希望它在白色背景上也是深色的

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 %>



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



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


.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); 
    }
  }
}