Question

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

淡入淡出图像上的文字也是淡入淡出，这是iOS webview的一个问题吗？

0 个答案: