Question

实施此http://22twenty.com/wallspace/ 在这里创建的

A way to fade in the background on load? HTML：

<!DOCTYPE html>
<html lang="en">
<!--To Do: -->
<!-- list menu logo size  -->
<!--all other pages -_- -->
  <head>
    <meta charset="utf-8">
    <title>Wall Space Gallery And Framing</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
  <link rel="stylesheet" href="css/style.css">
<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

<![endif]-->
  </head>
  <body>



<header>
                <div id="wrap">
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-1.jpg" />
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-5.jpg" />
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-3.jpg" />
</div>

                    <div class="logo">
                                        <a id="single_image" href="index.html"><img src="img/logo.png" alt=""/></a>
                    </div> 

                    <ul id="navigation">
                        <li id="active"><a href="index.html" alt="home" >Home</a></li>
                        <li><a href="exhibitions.html" alt="Exhibitions"> Exhibitions</a></li>
                        <li><a href="artists.html" alt="Artists"> Artists</a></li>
                        <li><a href="contact.html" alt="Contact"> Contact</a></li>
                    </ul>


</header>


                <div id="content">


                </div>

<footer>
    <div id="copyright">
        <p>Copyright &copy Wall Space Gallery And Framing 2012</p>
    </div>

    <div id="twenty">
        <p>Website By <a href="http://www.22twenty.com">22Twenty</a> Web Solutions</p>
    </div>    
</footer>




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.min.js"></script>
<script>
$(document).ready(function(){
    $('img').hide();

function anim() {
    $("#wrap img").first().appendTo('#wrap').fadeOut(2000);
    $("#wrap img").first().fadeIn(2000);
    setTimeout(anim, 4000);
}
anim();

)};
</script>
</body>
</html>

css很长，但你可以在这里得到它视图源：http://22twenty.com/wallspace/

应该在chrome上工作，不确定其他浏览器

希望有人可以提供帮助！

由于

丹佛

Answer 1

背景淡化似乎不适用，因为您在#wrap中使用前景图像。

根据我对你想要的理解，我得到了一些工作here。

小提琴中的css在级联中低于样式表中的css，因此优先。调整标题高度以适合您的图像。如果所有图像的大小相同，则不需要#wrap overflow:hidden - 来自示例的图像不是。

背景滑块问题

1 个答案: