悬停时的背景颜色更改不与 CSS 动画一起使用

Question

我一直试图在this page 上实现效果（它似乎在某些触摸屏上不起作用！）其中文本上升并且悬停时背景变暗，但我无法改变背景我添加了 CSS 动画，如果我删除它，那么背景颜色效果会很好。

我还想对背景图片的 100% 高度产生这种效果，就像在原始页面中一样。

有没有办法让它工作？

#tech-specs-container-desk {
 display: inline-block; 
 position: relative;
 z-index : 1;
 width: 100%;
 height: 581px; 
 background-image: url('https://i.stack.imgur.com/mQF3B.jpg');
 background-size: 100vw 100%;  
 }
 .specs:hover{
 font-size: 25pt;
 line-height: 30pt;
 position: relative;   
 background: rgba(0, 0, 0, 0.2)   
  -webkit-animation: moving-spec 3s forwards;
 animation: moving-spec 3s forwards;   
 }
 @-webkit-keyframes moving-spec {
    from {bottom: 0px;}
    to {bottom: 100px;}
}

@keyframes moving-spec {
    from {bottom: 0px;}
    to {bottom: 100px;}
} 
 .specs{
 width: 18%;
 display: inline-block;   
 font-family:'Futura Std Light';
 font-size: 15pt;
 line-height: 20pt; 
 color: #666666;
 text-align: center; 
 padding: 10px 20px; 
 border-right: 0.5px solid #666666;
 vertical-align: text-top;   
 }
 #inner-specs-container-desk {
 display: inline-block;
 position: relative;    
 width: 100%;
 top:270px;   
 }

<div id="tech-specs-container-desk">
    <div id="inner-specs-container-desk">
      <div id="spec-one" class="specs"> Integración con sistemas de salud bajo protocolo HL7 </div>
      <div id="spec-two" class="specs"> Funcionamiento en tiempo real</div>
      <div id="spec-three" class="specs">Almacenamiento en CLOUD y escalable </div>
      <div id="spec-four" class="specs">Protocolos de seguridad de la información </div>
    </div>
  </div>

Background img

Answer 1

我改变了css，在动画+背景之前使用了背景，所以它被正确定义了。背景+动画在我的浏览器中无效。

编辑：以下答案是正确的。甚至没有看到丢失的符号。

#tech-specs-container-desk {
 display: inline-block; 
 position: relative;
 z-index : 1;
 width: 100%;
 height: 581px; 
 background-image: url('https://i.stack.imgur.com/mQF3B.jpg');
 background-size: 100vw 100%;  
 }
 .specs:hover{
 font-size: 25pt;
 line-height: 30pt;
 position: relative;
 background: rgba(0, 0, 0, 0.2);   
 background: rgba(0, 0, 0, 0.2)   
  -webkit-animation: moving-spec 3s forwards;
 animation: moving-spec 3s forwards;
 z-index: 9999;   
 }
 @-webkit-keyframes moving-spec {
    from {bottom: 0px;}
    to {bottom: 100px;}
}

@keyframes moving-spec {
    from {bottom: 0px;}
    to {bottom: 100px;}
} 
 .specs{
 width: 18%;
 display: inline-block;   
 font-family:'Futura Std Light';
 font-size: 15pt;
 line-height: 20pt; 
 color: #666666;
 text-align: center; 
 padding: 10px 20px; 
 border-right: 0.5px solid #666666;
 vertical-align: text-top;   
 }
 #inner-specs-container-desk {
 display: inline-block;
 position: relative;    
 width: 100%;
 top:270px;   
 }

<div id="tech-specs-container-desk">
    <div id="inner-specs-container-desk">
      <div id="spec-one" class="specs"> Integración con sistemas de salud bajo protocolo HL7 </div>
      <div id="spec-two" class="specs"> Funcionamiento en tiempo real</div>
      <div id="spec-three" class="specs">Almacenamiento en CLOUD y escalable </div>
      <div id="spec-four" class="specs">Protocolos de seguridad de la información </div>
    </div>
  </div>

Answer 2

您只是在background: rgba(0, 0, 0, 0.2) 末尾缺少一个;