具有疊加效果的圖像 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>

其實我需要像這樣

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>

希望這可以幫助！

Answer 2

請試試這個。 我添加了一些css：

.img-wrap {
  display: inline-block;
  position: relative;
  width: 386px;
}
.img-box:before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  transform:scale(0); 
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
}
.img-wrap:hover .img-box:before {
  transform:scale(1); 
}
.img-wrap:hover .overlay-leftTop{
  opacity:1;  
}
img {
  height: auto;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  display: block;
}

 .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%; opacity:0; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; } .img-wrap { display: inline-block; position: relative; width: 386px; } .img-box:before { position: absolute; content: ""; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100%; height: 100%; background: rgba(0,0,0,0.4); transform:scale(0); transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; } .img-wrap:hover .img-box:before { transform:scale(1); } .img-wrap:hover .overlay-leftTop{ opacity:1; } img { height: auto; max-height: 100%; max-width: 100%; width: auto; display: block; }

 <div class="img-wrap"> <div class="img-box"> <img src="https://image.ibb.co/evyyfm/mu.jpg" alt="img01"/> </div> <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> </a> </div>

Answer 3

我想這就是你想要的。

 .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; } .view-btn{ position: absolute; top: 180px; font-size: 16px !important; border: 2px solid #fff; display: inline-block !important; text-align: center; padding: 10px 15px; opacity: 0; transition:all 350ms ease 0s; } .overlay-leftTop:hover .view-btn{ opacity:1; }

 <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> <span class="view-btn">View More</Span> </div> </div> </div> </a>