所以我第一次使用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。
谢谢!
答案 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%;
}
<强>赞成强>
<强>缺点强>
最终结果应如下所示: