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

标签 css background-image

添加第二行 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>

最佳答案

问题是您正在使用“渐变”div 作为背景，但正如@dowomenfart(什么名字)指出的那样，它不在正确的嵌套范围内。

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

首先确保您的“渐变”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)";

关于css - 白色条现在出现在我的动画渐变背景下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28703993/

上一篇：html - 不会并排放置表格的流畅的两列表格布局

下一篇：javascript - 使用 Jquery 更改 css 样式适用于 id，而不适用于类

相关文章：

html - CSS - 在填充中放置滚动条

css - Bootstrap 如何从一个类切换到另一个类？

html - 缩放时保持图像正确显示 (HTML)

html - 使响应式全屏背景图像具有固定按钮

css - 如何将 CSS 滤镜应用于背景图像

html - 在 Outlook 中转发响应式电子邮件会破坏 100% 宽度的表格

ios - 移动设备上的多个 CSS 背景图像

css - 将一个 div 在另一个高度为 100% 的 div 中垂直居中

css - 在可滚动内容上具有全高背景色

css - 容器 DIV 背景图像不随内容扩展

©2024 IT工具网  联系我们