CSS Animation @keyframesで内部テキストのサイズ変更を防ぐ方法は？

Question

@keyframesを使って背景を変形したいと思います。しかし、テキストも縮尺されており、私はそれを何も変更せずに作りたいと思っています。

私はthis methodを試しましたが、@keyframesが問題であるようです。 これはhtml/cssだけでは不可能で、JS/jqueryを使うべきでしょうか？ または私は気づいていない他の間違いをします。

#bg { 
 
    z-index:1; 
 
    background:grey; 
 
    position:relative; 
 
    width:1000px; 
 
    height:400px; 
 
    animation:bg 2s ease infinite; 
 

 
} 
 
@keyframes bg { 
 
    from { 
 
    transform:none; 
 
    } 
 
    to {  
 
    transform:scale(1.107,1.007); 
 
    } 
 
} 
 

 
ul { 
 
    color:white; 
 
    list-style-type:none; 
 
    position:absolute; 
 
}

<div id="bg"> 
 
    <div class="menu"> 
 
    <ul> 
 
     <li>item</li> 
 
     <li>item</li> 
 
     <li>item</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

あなたはそのようなことを意味していますか？そうであれば、あなたはかなりあります。position:absoluteイメージをバックグラウンドに設定してください：z-index:-1イメージを設定するだけでイメージはカバーされず、コンテンツも隠されません。また、この場合、プロパティの場合にのみbackground-sizeは必要ありません。

.image { 
 
    z-index:-1; 
 
    position:absolute; 
 
    width:100%; 
 
    height:100%; 
 

 
    animation:img 2s ease-in-out infinite; 
 
    animation-direction:alternate; 
 
} 
 

 
@keyframes img { 
 
    from { transform:none} 
 
    to { transform:scale(1.007,1.007);} 
 
} 
 

 
ul { 
 
    color:white; 
 
    list-style-type:none; 
 
    position:absolute; 
 
}

<div class="container-fluid"> 
 
    <div class="menu"> 
 
    <ul> 
 
     <li>item</li> 
 
     <li>item</li> 
 
     <li>item</li> 
 
    </ul> 
 
    </div> 
 
    <img class="image" src="https://3.bp.blogspot.com/-uz1WlYUbNxc/Vxok-DC_a7I/AAAAAAAADf8/nsZC7tFimW0P7OrwBdfTiA-_eWQ_VnohACLcB/s1600/13054839_1119372871446695_1522714893_o.jpg"> 
 
</div>