在带有BG颜色的div顶部添加图像

时间:2016-02-28 20:30:55

标签: html css background

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

现在,当您在主页上向下滚动时,会出现一些视差滚动,以便显示下一部分。这就是它的样子:

enter image description here

我希望在该div的顶部添加另一行树,而不是使用下一个div内容的容器那么粗糙的行,所以它看起来像这样:

enter image description here

当你向下滚动时,树木会向上移动并离开屏幕。

到目前为止,看起来我只能自定义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。

谢谢!

1 个答案:

答案 0 :(得分:1)

实现此目的的一种方法是为评论中讨论的黑树创建单独的图层。由于您无法修改HTML结构,我们将为pseudo selector div创建一个#content-wrapper .content,它基本上是一个获取黑树的背景图层,而正文则获得没有树的背景

第一步是将身体背景更改为没有黑树的图像。

然后,添加这个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请求)

最终结果应如下所示:

dark trees slide