html - 淡出/彩色覆盖背景图像

我已经复制了我的问题的演示，但解决了一个相对简单的问题：

Fiddle

我有四个圆形div，每个圆形div都具有唯一的背景图像（这就是为什么bg图像是内联的），但是我希望淡出该图像或用一种颜色覆盖该图像，并确保不淡出文本但保留其完全不透明度。

我尝试了很多事情，例如只是更改悬停时的不透明度等，但是却在这里苦苦挣扎。

<div class="faces-container">
<div class="faces" style="background-image: url('http://i.huffpost.com/gen/1697767/thumbs/o-GAME-OF-THRONES-facebook.jpg');">

  <span class="name">Dan</span>
</div>
</div>

.faces-container{
  height: auto;
  overflow: auto;
  text-align: center;
  margin: 0;
  box-sizing: border-box;
  padding: 20px 20px;
  display: inline-block;
     -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
}

.faces{
    border-radius: 200px;
    height: 200px;
    width: 200px;
  background-size: cover;
  -webkit-transition : all 500ms ease-out;
  -moz-transition : all 500ms ease-out;
  -o-transition : all 500ms ease-out;
  transition : all 500ms ease-out;
  color: transparent;
  line-height: 200px;
  font-size: 2.5em;
}

.faces:hover{
  cursor: pointer;
  -moz-box-shadow:    0px 0px 10px 5px #aaa;
  -webkit-box-shadow: 0px 0px 10px 5px #aaa;
  box-shadow:       0px 0px 10px 5px #aaa;
  color: #F7CA18;
}

最佳答案

JSFiddle

我为background-image删除了您的内联.faces并替换为

background-image: linear-gradient( rgba(0,0,0,0.7), rgba(0,0,0,0.7) ), url('http://i.huffpost.com/gen/1697767/thumbs/o-GAME-OF-THRONES-facebook.jpg');

在您的.faces课上。

我对/ unique /名称和内联样式声明一无所知。这是没有道理的。您可以像这样：

<div class="faces face-1"></div>，然后是face-2等，其中元素的所有通用样式都将存储在faces中，并且悬停状态将在faces-x和faces-2中处理。

关于html - 淡出/彩色覆盖背景图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27711382/