Question

我一直试图在this page上实现效果（它似乎不适用于某些触摸屏！）文字上升，背景在悬停时变暗，但我无法做到添加CSS动画时背景会发生变化，如果我删除它，那么背景颜色效果会很好。

此外，我希望在原始页面中对背景图片的100％高度产生此效果。

有没有办法让它发挥作用？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Background img

Answer 1

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您在;

的末尾错过background: rgba(0, 0, 0, 0.2)

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

2 个答案: