2

これは IOS webview の問題ですか? フェードイン効果のある画像 (css3 を使用) にテキストを配置すると、テキストにもフェードイン効果が適用されます。テキストのフェードイン効果を削除するにはどうすればよいですか?

コードは次のとおりです。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <title>text on top of a fade-in image has render problem, is this an issue of iOS   webview?</title>
<style type="text/css">
body{ position: relative;}
.lazy >img{opacity: 0; -webkit-transition:opacity 1s ease; }
.text-container{font-family: "Georgia"; color: #666; font-size: 14px; line-height: 1.8em; position: absolute; top:10px; left:500px;}
</style>
</head>
<body>

<div class="image-container lazy">
    <img src="http://www.szobafaldekor.hu/images/otlettar/nimo-2-x.jpg"/>
</div>

<div class="text-container">
    <p>Look at the text changes.  </p>
    <p>Look at the text changes.  </p>
    <p>Look at the text changes.  </p>
    <p>Look at the text changes.  </p>
    <p>Look at the text changes.  </p>
    <p>Look at the text changes.  </p>
</div>

<script type="text/javascript">
    window.onload = function(){
        var imgs =document.querySelectorAll("img");
        for( var i= 0,j=imgs.length; i<j; i++ )
        {
            imgs[i].style.opacity = 1;
        }
    }
</script>
</body>
</html>
4

0 に答える 0