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

Question

我正在尝试获取整页图像背景来处理主题，但它给我带来了问题。当我在背景上使用 position: fixed 时，它完全覆盖了顶部导航和标题。

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

网站:www.klondike-klinkers.com

我使用的覆盖 header 的代码:

<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。如果您在末尾查询 CSS，则无需添加“!important”。

---

可选地，如果您想设置固定 div 的样式，您可以使用以下代码:

将此 html 添加到 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;
   }

---

确保从可视化编辑器中删除最后一行和底部边距。我还建议使用 visual composer 本身添加白色背景。