我怎样才能从一个固定的位置背景图像排除一个div

我想获得一个完整的页面图像背景来处理一个主题，它给我的问题。当我在背景上使用position: fixed时，它完全覆盖顶部导航栏和标题。我怎样才能从一个固定的位置背景图像排除一个div

我知道有一种不同的方式来完成这项工作，但在堆栈和w3几个小时后，我无法解决它。谢谢您的帮助。

网站：www.klondike-klinkers.com

代码中，我使用了覆盖头：

<div id="bg"> 
    <img src="http://www.klondike-klinkers.com/wp-content/uploads/2016/01/Dollarphotoclub_10621667-1-1.jpg" alt="">

#bg { 
    position: fixed; 
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%; 
} 
#bg img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%; 
    min-height: 50%; 
}

来源

2016-01-26 Jon Eickman

如果您只是想将bg添加到body，您并不需要绝对定位的div。看完你的网站后，我可以说它可以通过CSS完成。 –

我看不到你链接的网站上您的问题，但你有没有尝试在导航/标题上设置一个z-index的值，使它们高于背景？

来源

2016-01-26 12:58:53

由于此刻该站点处于活动状态，因此我不得不背景背景。我试图仅仅测试一些事情，让它首先工作。我不熟悉z-index。我需要查看它。 –

试试这个：

body.custom-background { 
    background-image: url('http://www.klondike-klinkers.com/wp-content/uploads/2016/01/Dollarphotoclub_10621667-1-1.jpg'); 
    background-repeat: no-repeat; 
    background-position: top left; 
    background-attachment: fixed; 
    background-size: cover; 
} 
.page-wrapper { 
    background: transparent !important; 
} 
.header-wrapper { 
    background: #fff !important; 
} 
.header2 { 
    margin-top: 0 !important; 
} 
.container, .copyright { 
    background: #fff; 
    padding: 0 15px; 
}

确保CSS在最后加入这样它覆盖通古斯主题的CSS。如果在最后对CSS进行排序，则不需要添加“！important”。

可选，如果你想风格你定格，你可以使用下面的代码：

添加内page-wrapper这个网站后header-wrapper

<div id="bg">  
    <img src="http://www.klondike-klinkers.com/wp-content/uploads/2016/01/Dollarphotoclub_10621667-1-1.jpg" alt="" scale="0"> 
</div>

CSS：

#bg { 
    position: fixed; 
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%; 
    z-index: 0; 
} 

#bg img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%; 
    min-height: 50%; 
} 

.header2 { 
    text-align: center; 
    margin-top: 0; 
    margin-bottom: 0px; 
    padding-bottom: 30px; 
    } 
.header2, .container, .copyright { 
    position: relative; 
    z-index: 9; 
    background: #fff; 
    }

确保您摆脱了视觉作曲家的最后一行和页边距。我也建议使用视觉作曲家本身添加白色背景。

来源

2016-01-26 13:04:58

除了它现在完全覆盖了主体内容和页脚之外，它与标题完美结合。 –

@JonEickman我已经更新了我的答案，我希望它有帮助。 –

尝试在CSS中使用您想要引入的类。

z-index: 1;

z-index允许您的div彼此重叠。这取决于您分配的值。如果你给它一个1，那么默认情况下它会在你想要显示的其他内容之前。但是，如果你使你的Z指数：-1;那么它会落后。你也可以让一个div具有z-index：3，而1 div具有z-index：1.因此，具有3的z-index的那个将在具有1的z-index的div上重叠。

来源

2016-01-26 14:54:25 Plam

我怎样才能从一个固定的位置背景图像排除一个div

回答

相关问题