Question

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

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

我尝试过很多东西，比如只是改变悬停等的不透明度，但在这里挣扎。

<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 / name和内联样式声明的观点。这毫无意义。你可以这样说：

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

Answer 2

实施例

.faces:hover > span.name{
  opacity: 0.5    
}

Answer 3

将您的代码更改为此

＆＃13;

.faces-container,.faces,.name{transition : all 500ms ease-out;box-sizing: border-box}

.faces-container{
  height: auto;
  text-align: center;
  margin: 0;
  padding: 20px 20px;
  display: inline-block;
  animation: fadein 3s; 
  height: 200px;
  width: 200px;
  position: relative
}

.faces{
    border-radius: 200px;
    height: 100%;
    width: 100%;
    background-size: cover;
    transition : all 500ms ease-out;
    color: transparent;
    line-height: 200px;
    font-size: 2.5em;
    position: absolute;
    left: 0;
    top: 0
}
.name{
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,0,0)
}
.faces-container:hover .faces{
    box-shadow: 0px 0px 10px 5px #aaa;
    z-index: 1;
    opacity: 0
}
.faces-container:hover .name{
    cursor: pointer;
    color: #F7CA18;
    z-index: 2;
    opacity: 1
}

＆＃13;

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

＆＃13;

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

3 个答案: