html - 在具有 BG 颜色的 div 顶部添加图像

Question

所以我第一次使用 Square Space 为我的婚礼建立网站。

现在，当您在主页上向下滚动时，有一些视差滚动恰好会调出下一部分。这是它的样子:

我想在那个 div 的顶部添加另一行树，而不是使用下一个 div 内容的容器，这样它看起来像这样:

然后当您向下滚动时，树木会向上移动并离开屏幕。

到目前为止，我似乎只能自定义 CSS 而不是实际的 HTML 文件。我不确定如何在 CSS 中执行此操作。

当我检查 div 时，这是出现在 CSS 中的内容:

#content-wrapper .content {
width: 100%;
background-color: #54535f;
position: relative;
z-index: 50;
}
.content.has-main-image {
box-shadow: 0 0 75px rgba(0,0,0,.1);
}

任何人都可以帮忙编写代码吗？如果我可以访问 HTML 并且可以制作另一个 div，我可以轻松做到这一点，但我不知道如何使用 CSS 做到这一点。

谢谢!

Answer 1

一种方法是按照评论中的讨论为深色树创建一个单独的层。由于您无法修改 HTML 结构，我们将为 #content-wrapper .content div 创建一个伪选择器，它本质上是一个获取深色树的背景层，而 body 得到没有树木的背景。

第一步是将 body 背景更改为没有深色树木的图像。

然后，添加这个 CSS:

#content-wrapper .content:before {
    content: ""; /* required for psuedo selectors to work */
    display: block; /* makes sure element is a block box */
    position: absolute; /* make sure element does not affect layout */
    left: 0; right: 0; width: 100%; /* makes sure element stretches */
    height: 400px;
    top: -350px; /* offset element from content box so it appears above it */
    z-index: -1; /* make sure element does it overlap other elements */
    background: url(http://i.imgur.com/xx72pbB.png) no-repeat 50% 44%;
    background-size: cover;
}

此外，我注意到内容框中的background-color 与深色树的颜色不匹配，正确的值应该是:#585862

#content-wrapper .content {
    width: 100%;
    background-color: #585862; /* was #51535c */
    position: relative;
    z-index: 1; /* was 50, change to 1 to prevent overlapping */
}

.content-inner {
    background-color: #585862; /* was #51535c */
    max-width: 960px;
    margin: 0 auto;
    padding: 100px 8%;
}

---

优点

• 保持视差效果
• 不修改HTML结构
• 增加深度

缺点

• 页面加载时间略有增加(因为发出了两个 http 请求)

---

最终结果应该是这样的: