html - 使用 CSS 叠加图像

Question

所以我会尽量简短 - 我们的网站上有一个 slider ，当我们上传图像时， slider 上的文字很难阅读，所以我们想出了如果我们在 photoshop 中添加一个白色叠加层到图片， slider 看起来好多了。

然而，这不是一个很好的解决方案，因为一旦帖子移动到一般栏，我们发现用 photoshop 叠加的图像现在不那么吸引人了。

我们提出的解决方案是，我们能否向包含 slider 的 div 添加一个半透明覆盖层，这样上传的任何图像都只会在 slider 中具有半透明覆盖层。

我在这里和其他使用叠加层和 css 的网站上做了一些研究 - 并将其整合到一个集合中，我几乎在那里，但我认为缺少一些基本的部分。

现在它只在悬停上工作，所以我需要弄清楚，但是如果你看到这个例子你就会明白

在我的乌托邦中 - 如果我在 jsfiddle 上单击运行，该图像应该已经覆盖了它，而不是在悬停时，我想我错过了我应该进行编辑的地方

http://jsfiddle.net/9LXcU/

.box { 
    border:1px solid #000;
    padding:5px;
    height:151px;
    width:195px;

}
.overlay {  
    background:rgba(255, 0, 0, .75);
    text-align:center;
    opacity:0;    
    width:100%;height:100%; 
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.box:hover {
    border:1px solid #555;
    border-radius:5px;
}
.box:hover .overlay {
    opacity:12;
}
.search {
    position:relative;
    top:60px;
}

Answer 1

嗯，这是一个FIDDLE这可能就是您想要的。

CSS

.box { 
  border:1px solid #000;
  padding:5px;
  height:151px;
  width:195px;
  text-align:center;
  background: url('http://www.breastcanceranswers.com/wp-content/uploads/2013/10/featuredimagebcam.jpg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.overlay {
    width: 100%;
    height: 100%;
    background-color: pink;
    opacity: 0.5;
    color: red;
    vertical-align: middle;
}