白色条现在出现在我的动画渐变背景下面

时间：2015-02-24 18:57:43

标签： css background-image

添加第二行fancybox画廊后，现在所有浏览器（桌面和移动设备）的屏幕底部都有一个白色条形图。什么可能导致它？我的背景设置在高度：100％并且完美地工作直到这个!!会爱一些帮助！ http://studiopowell.net/TEST_gradient.html 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
  <head>
  <style type="text/css">
    body{
     background-color: #FFF;
   padding: 0px;
   margin: 0px;

 }

 #contain{
     display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
     -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
   position: relative;
     -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
 }

 #wrapper{
     display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
     -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
   position: relative;

     }

  #wrapper2{
     display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
     -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
   position: relative;

     }

 .titles {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 14px;
    color:#33;
    text-align:left;
    padding-left: 0px;
    padding-top: 10px;
    padding-bottom: 100px;
     display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column; /* works with row or column */
   flex-direction: column;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
    position: relative;
    z-index: 100;


}


#gradient
{
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    opacity: 0.1;
    position: absolute;
    z-index: -99999; 

}

.hidden {
    display: none;
}




  </style>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script type="text/javascript" src="gradientscript.js"></script>
    <!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">

    $(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        padding : 0,
        arrows      : 'true',
        openSpeed   : '400',
        closeSpeed  : '400',
        nextClick : 'true',
        overlay : { speedOut   : 800,},
        margin      : [20, 60, 20, 60] // Increase left/right margin
        });

</script>
</head>
<body>
<div id="gradient"> 
</div>

<div id="contain">
<div class="titles"><img src="archive-icon.png" width="185" height="185" alt="studio powell michael powell studiopowell art artist books installation video" /><br /><br />M I C H A E L &nbsp; P O W E L L<br /><br /></div></div>

<div id="wrapper">
<a class="fancybox" rel="gallery1" href="archive-icon.png"><img src="ruby ball.jpg" alt="" width="200" /><a class="fancybox" rel="gallery2" href="archive-icon.png"><img src="ruby ball.jpg" alt="" width="200" /><a class="fancybox" rel="gallery3" href="archive-icon.png"><img src="ruby ball.jpg" alt="" width="200" /><a class="fancybox" rel="gallery4" href="archive-icon.png"><img src="ruby ball.jpg" alt="" width="200" /></a>
<div class="hidden"><a class="fancybox" rel="gallery1" href="ruby ball.jpg"><a class="fancybox" rel="gallery2" href="ruby ball.jpg"><a class="fancybox" rel="gallery3" href="ruby ball.jpg"><a class="fancybox" rel="gallery4" href="ruby ball.jpg"></a></div></div>
<br /><br /><br /><br /><br /><br />
<div id="wrapper2">
<a class="fancybox" rel="gallery5" href="archive-icon.png"><img src="ruby ball.jpg" alt="" width="200" /><a class="fancybox" rel="gallery6" href="archive-icon.png"><img src="ruby ball.jpg" alt="" width="200" /><a class="fancybox" rel="gallery7" href="archive-icon.png"><img src="ruby ball.jpg" alt="" width="200" /><a class="fancybox" rel="gallery8" href="archive-icon.png"><img src="ruby ball.jpg" alt="" width="200" /></a>
<div class="hidden"><a class="fancybox" rel="gallery5" href="ruby ball.jpg"><a class="fancybox" rel="gallery6" href="ruby ball.jpg"><a class="fancybox" rel="gallery7" href="ruby ball.jpg"><a class="fancybox" rel="gallery8" href="ruby ball.jpg"></a></div></div>


</body>

</html>

1 个答案:

答案 0 :(得分：0)

问题在于您正在使用＆＃34;渐变＆＃34; div作为背景，但它在@dowomenfart（名字）所指出的正确嵌套之外。

当您注意到进行了一些更改时，您的opacity:0.1规则会给您带来不良影响，但我们可以绕过这个问题！

首先确保你的＆＃34;渐变＆＃34; div只是在<body>之后的最外层。

删除height:100%规则。 现在，删除不透明度规则，然后将其应用于-webkit-gradient规则:(看看如何使用库来实现此效果，您还必须编辑gradientscript.js文件以支持{{1而不仅仅是rgba）

rgb

所以你的HTML应该是这样的 - 

background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(220, 58, 120,0.1)), to(rgba(94, 50, 213,0.1)));

你的脚本文件：

 <html>
    <head></head>
    <body>
       <div id="gradient">
           <div id="container"></div>
           <div id="wrapper"></div>
           <div id="wrapper2"></div>
       </div>
    </body>
相关问题
最新问题