Question

我对非透明叠加层上的文字有一个基本问题。目前，我有这个：JSFiddle。但是，kitty这个词不是不透明的，你可以看到下图。如何使其具有透明度：1仍具有当前叠加效果？

另外，如何垂直对齐文本？

谢谢你们太多了！我一直在努力使用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

在半透明覆盖层上制作文字不透明（也是对齐）

1 个答案: