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

Question

添加第二行 fancybox 画廊后，现在在所有浏览器（台式机和移动设备）的屏幕底部都有一个白色条延伸。什么可能导致它？我的背景设置为 height: 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>

Answer 1

问题是您正在使用 "gradient" div 作为背景，但正如@dowomenfart（多好的名字）指出的那样，它不在正确的嵌套范围内。

正如您在进行一些更改时注意到的那样，您的 opacity:0.1 规则会给您带来不良影响，但我们可以避免这个问题！

首先确定你的"gradient"div是最外层的巢只在<body>之后。

删除 height:100% 规则。现在，删除你的不透明度规则，而是将它应用到你的 -webkit-gradient 规则：（看看你如何使用库来实现这种效果，你还必须编辑你的 gradientscript.js 文件以支持 rgba 而不仅仅是 rgb)

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

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

 <html>
    <head></head>
    <body>
       <div id="gradient">
           <div id="container"></div>
           <div id="wrapper"></div>
           <div id="wrapper2"></div>
       </div>
    </body>

还有你的脚本文件：

var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgba("+r1+","+g1+","+b1+",0.1)";

var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgba("+r2+","+g2+","+b2+",0.1)";

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

white bar now appearing below my animated gradient background

css

background-image