Question

尝试在悬停时使图像变暗，但有些东西是冤枉的。

我使用“span”创建了较暗的图层但是当我添加它时，它看起来很糟糕。

<div class="postOUT">

    <div class="post_first">
        <span></span>
        <div class="category">Stuff</div>
        <h1>Text will go here</h1>
    </div>

CSS的完整代码：

没有SPAN - http://jsfiddle.net/np2fLwva/
使用SPAN - http://jsfiddle.net/tvL84sd9/

有没有其他方法可以创造这种效果？

Answer 1

语义span元素应该用于内联对象。这里的用例是一个块级元素。所以至少，我建议使用div元素。要消除空HTML元素，请考虑将背景叠加层放在:before / :after伪元素上。

旁注：根据CanIUse.com，您只需要-webkit供应商前缀进行转换，而且只适用于较旧的Android浏览器。否则，您只需说明transition: [values]。

以下是一个例子：

＆＃13;

.post_first {
  overflow: auto;
  clear: both;
  height: 649px;
  background: url(http://japanpapa.ru/fun/jpap/img/featured-bg.png), url(http://japanpapa.ru/fun/jpap/img/post01.jpg) no-repeat center center;
  background-size: cover;
  position: relative;
}
.post_first .-content {
  position: relative;
  z-index: 1000;
}
.post_first:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  background: rgba(0, 0, 0, .5);
  -webkit-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  content: "";
  z-index: 999;
}
.post_first:hover:before {
  opacity: 1;
}
.category {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.5em;
  font-weight: 500;
  text-transform: uppercase;
  color: white;
  padding: 10px;
  border: 3px solid #fff;
  margin: 30px auto;
  text-align: center;
  width: 150px;
  position: relative;
  top: 7.4%;
}
.post_first h1,
.post_other h1 {
  font-family: 'Open Sans', sans-serif;
  font-size: 3em;
  font-weight: 800;
  text-transform: uppercase;
  color: white;
  padding: 0 10%;
  margin: 30px auto;
  text-align: center;
  position: relative;
  top: 14.5%;
}

＆＃13;

<div class="postOUT">

  <div class="post_first">
    <div class="-content">
      <div class="category">Stuff</div>
      <h1>Text will go here</h1>
    </div>
  </div>

</div>

＆＃13;

Answer 2

请尝试以下操作： Demo

<强> CSS：

.overlay {
    display: block;
    height: 100%;
    width: 100%;
    background: transparent;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}
.overlay:hover {
    display: block;
    background: rgba(0, 0, 0, .5);
}

<强> HTML：

<div class="overlay">
            <!-- <span></span>  If i add it all breakes-->
            <div class="category">Stuff</div>
             <h1>Text will go here</h1>

        </div>

Answer 3

您也可以通过绝对定位来实现：

.postOUT{
    position:relative;
}

.postOUT span, .postOUT span{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    opacity: 0;
    background: rgba(0,0,0,.5);
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

这是一个工作小提琴：http://jsfiddle.net/2s2fLar1/

Answer 4

如果你想避免额外的标记，可以使用伪元素，就像在这个小提琴中一样：http://jsfiddle.net/np2fLwva/3/

.post_first:after, .post_other:after {
    display:block;
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0, 0, 0, 0.85);
    background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9; /* ie fallback png background image */
    z-index:1;
    color:black;
    opacity:0;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;    
}

.post_first:hover:after, .post_other:hover:after {
    opacity:1;
}

Answer 5

这是一个简单的代码HTML＆amp; CSS。您可以使用它来创建一个良好的阴影效果。

HTML部分。

<div class="bg">
  <div class="shade"></div>
</div>

CSS部分。

.bg{
  height: 500px;
  background: url(your_image.jpg) no-repeat center center;
  background-size: cover;
}
.shade {
  width: 100%;
  height:100%;
  transition: 0.5s all;
}
.shade:hover {
  background-color: rgba(0,0,0,0.2);
}

Answer 6

您可以使用单个元素，并使用伪元素作为叠加层：

＆＃13;

div{
  height:300px;
  width:300px;
  position:relative;
  background:url(http://placekitten.com/g/300/300);
  }
div:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:black;
  opacity:0;
  transition:all 0.6s;
  }

div:hover:before{
  opacity:0.4;
  }

＆＃13;

<div></div>

＆＃13;

在悬停时使图像变暗

6 个答案: