html - 使代码更具响应性(图像上的文本)

Question

如果使用百分比而不是像素，您将如何创建它？基本上，无论图像大小，它总是水平和垂直居中。每当我尝试使用百分比进行创作时，深色背景都会完全突出图像的一侧。

Codepen

HTML:

<div class="gallery">
<div class="gallery-image">
  <img src="http://37.media.tumblr.com/bddaeb8fe12eda6bb40cf6a0a18d9efa/tumblr_n8zm8ndGiY1st5lhmo1_1280.jpg" width="300" height="200" />

<div class="gallery-text">

<h3>BOOM!</h3>

</div>    
</div>  
</div>

CSS:

.gallery {
    width:300px;
    height:200px;
    position: relative;
    padding: 0;
    margin: 0;
    text-align: center;
}

.gallery-image{
    cursor:pointer;
    position: relative;
    display: block;
}

.gallery-text{
    position: absolute;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 300px;
    height: 200px; 
    text-align: center;
    background-color: rgba(0,0,0,0.8);
    opacity: 0;
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    transition: opacity 0.6s;
   vertical-align:middle;
   line-height:200px;
}

.gallery-text:hover{
    opacity: 1;      
}

.gallery-text h3{
    color: white;
    display: inline-table;
   vertical-align:middle;
   line-height:100%;            
}

Answer 1

检查此代码段，希望对您有所帮助!

.gallery {
    position: relative;
    padding: 0;
    margin: 0;
    text-align: center;
}

.gallery-image{
    position:relative;
    width:30%;
    height:30%;
    margin:10px;
}
.gallery-image1{
    position:relative;
    width:50%;
    height:50%;
}
.gallery-image img {
    width:100%;
    vertical-align:top;
}
.gallery-image:after {
    content:'\A';
    position:absolute;
    width:100%; height:100%;
    left:0;
    top: 0;
    background:rgba(0,0,0,0.8);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.gallery-image:hover:after {
    opacity:1;
}

<div class="gallery">
<div class="gallery-image">
  <img src="http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=8319683" />

<div class="gallery-text">

</div>    
</div>  
  
  <div class="gallery-image gallery-image1">
  <img src="http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=8319683" />

<div class="gallery-text">

</div>    
</div>  
</div>