html - 背景图像上的淡出/颜色叠加

Question

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

Fiddle

我有四个圆形 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;
}

Answer 1

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 .