Question

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

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

问题的解决方案是，我们可以为保存滑块的div添加半透明叠加层，这样任何上传的图像都只会在滑块中具有半透明叠加层。

我在这里以及使用overlay和css的其他网站做了一些研究 - 并且已经将它用于我几乎在那里的一组但是我想到了一些基本的部分。

现在它只在悬停工作，所以我需要弄清楚，但如果你看到你会理解的例子

在我的乌托邦中 - 如果我点击jsfiddle上的RUN，那个图像应该已经叠加了它，而不是悬停，我想我错过了我应该编辑的地方

.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;
}

使用CSS覆盖图像

1 个答案: