Question

我试图获得一个完整的页面图像背景来处理主题，并给我一些问题。当我在背景上使用position: fixed时，它会完全覆盖顶部导航和标题。

我知道有一种不同的方法可以完成这项工作，但是在堆栈和W3之后数小时我无法解决问题。谢谢您的帮助。

网站：www.klondike-klinkers.com

代码I已经使用了覆盖标题：

<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%;
}

Answer 1

试试这个：

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，以便覆盖legenda主题的CSS。你不需要添加＆＃34;！important＆＃34;如果你最后把CSS搞砸了。

或者，如果您想要修改固定div的样式，可以使用以下代码：

在page-wrapper

之后的header-wrapper内添加此html

<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;
   }

确保摆脱视觉作曲家的最后一行和边距底部。我还建议使用视觉编辑器本身添加白色背景。

Answer 2

我无法在您关联的网站上看到您的问题，但是您是否尝试在导航/标题上设置z-index值以使其高于背景？

Answer 3

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

z-index: 1;

z-index允许你的div相互重叠。这取决于您分配的值。如果你给它一个1然后默认它将在你想要显示的其他一切的前面。但是如果你制作你的z-index：-1;那么它将落后。您还可以使一个div具有z-index：3，并且1 div具有z-index：1。因此，具有3 for z-index的那个将重叠在具有1的z-index的div上。

如何从固定位置背景图像中排除div

3 个答案: