html - 具有叠加效果的图像 css 上的文本

Question

我尝试将一些内容放在具有一些叠加效果的图像上，但它没有显示我需要的输出。另外我不知道如何做叠加效果任何人都可以帮助我。

.destination {
  padding: 20px;
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  transition: all .5s ease;
  -ms-transition: all .5s ease;
  -webkit-transition: all .5s ease;
}
.destination h3 {
  font-size: 25px;
  color: #fff;
  line-height: 20px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.destination span {
  display: block;
  font-size: 15px;
  color: #fff;
  line-height: 16px;
}
.overlay-leftTop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
}
.destinationmask {
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0.4;
  filter: alpha(opacity=50);
  background: #000;
}

<img src="https://image.ibb.co/evyyfm/mu.jpg" alt="img01"/>
<a href="" class="overlay-leftTop">
    <div class="table-display">
        <div class="table-cell table-cell-bottom">
            <div class="destination">
                <h3>TEST</h3>
                <span>Check,check1,check2</span>
            </div>
        </div>
    </div>

实际上我需要类似 this 的东西

Answer 1

你应该使用 background-image CSS 属性而不是 <img>标签。并且对于效果使用伪元素，如 :before .

看看下面的片段:

.destination {
    padding: 20px;
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    transition: all .5s ease;
    -ms-transition: all .5s ease;
    -webkit-transition: all .5s ease;
}
.destination h3 {
    font-size: 25px;
    color: #fff;
    line-height: 20px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.destination span {
    display: block;
    font-size: 15px;
    color: #fff;
    line-height: 16px;
}
.overlay-leftTop {
    display: block;
    position: relative;
    text-decoration: none;
    width: 300px;
    height: 300px;
    z-index: 9;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
}
.overlay-leftTop:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: rgba(0,0,0,0.3);
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    
}
.overlay-leftTop:hover {
   text-decoration: none;
}
.overlay-leftTop:hover:before {
   background: rgba(0,0,0,0.5);
}
.destinationmask {
    width: 100%;
    height: 100%;
    z-index: 5;
    opacity: 0.4;
    filter: alpha(opacity=50);
    background: #000;
}

<a href="" class="overlay-leftTop" style="background-image: url('https://image.ibb.co/evyyfm/mu.jpg');">
  <div class="table-display">
    <div class="table-cell table-cell-bottom">
      <div class="destination">
        <h3>TEST</h3>
        <span>Check,check1,check2</span>
      </div>
    </div>
  </div>
</a>

希望这对您有所帮助!