使半透明覆蓋層上的文本不透明（也對齊）

Question

我有一個關於不透明覆蓋文本的基本問題。目前，我有這個：JSFiddle。但是，kitty這個詞不是不透明的，你可以看到下面的圖片。我怎樣才能使它具有透明度：1，同時仍然有當前的疊加效果？

另外，如何垂直對齊文本？

謝謝你們soooo了！我一直在用CSS掙扎。

的html代碼：

<div class="bucket"> 
<a href="#"> 
<img src="http://kittybloger.files.wordpress.com/2012/05/cute-kittens-20-great-pictures-1.jpg" alt="" class="bucket"/> 
<div class="img-overlay"> 
    <h3>kitty</h3> 
    </div> 

CSS代碼：

.bucket { 
width: 31%; 
float: left; 
position: relative; 
margin-top: 1%; 
margin-right: 1%; 
margin-bottom: 1%; 
margin-left: 1%; 
text-shadow: 0px 0px 0px; 
-webkit-box-shadow: 0px 0px 0px; 
box-shadow: 0px 0px 0px; 
background-color: rgba(255,255,255,1.00); 
overflow: hidden; 
} 

.img-overlay h3 { 
opacity: 1; 
color: rgba(255,254,254,1.00); 
text-align: center; 
vertical-align: middle; 
height: 100%; 
} 

.img-overlay { 
background-color: rgba(0,0,0,1.00); 
bottom: 0px; 
top: 0px; 
opacity: 0; 
overflow:hidden 
filter: alpha(opacity=0); 
position: absolute; 
width: 100%; 
z-index: 1000; 
transition: opacity 0.3s; 
-webkit-transition: opacity 0.3s; 
} 
.bucket:hover .img-overlay { 
opacity:0.75; 
filter: alpha(opacity=75); 
} 

.bucket img { 
width: 100%; 
} 

Answer 1

中心垂直文本通過增加線高度，但圖像將需要一個固定的高度。

對於疊加層，使懸停CSS完全可見，但原始疊加層上的背景透明。

.img-overlay h3 { 
    opacity: 1; 
    color: rgba(255,254,254,1); 
    text-align: center; 
    vertical-align: middle; 
    height: 100%; 
    line-height: 200px; 
} 
.img-overlay { 
    background-color: rgba(0,0,0,.700); 
    bottom: 0px; 
    top: 0px; 
    opacity: 0; 
    overflow:hidden 
    filter: alpha(opacity=0); 
    position: absolute; 
    width: 100%; 
    z-index: 1000; 
    transition: opacity 0.3s; 
    -webkit-transition: opacity 0.3s; 
} 
.bucket:hover .img-overlay { 
    opacity:1; 
    filter: alpha(opacity=75); 
} 

整個疊加層及其所有內容被告知應該是透明的。通過將疊加層背景的RGBA更改爲僅透明，您的文本保持完全可見。

JS Fiddle