如何使用CSS实现图像中所示的简单背景效果？

如何做到这一点的双重背景效果？如果可能的话，不要拆分包含个人信息和社交链接的覆盖div。

2017-02-16 Abhimanyu Pathania

这可以以多种方式来完成。发布你迄今为止所做的，我们建议根据该 – LGSon

我没有做到这一点，但我正在考虑简单地制作一个单独的div，其中包含在黑暗背景下的内容。但是，这感觉就像分裂一部分应该是什么一样。请随意发布您的解决方案。 –

@LGSon接受:) –

最简单的和一个将内容扩展是一个伪元素，这里使用::before

.parent { 
 
    position: relative; 
 
    padding: 10px 50px; 
 
} 
 
.parent::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; 
 
    height: 60%; 
 
    background: gray; 
 
    z-index: -1; 
 
} 
 
.child { 
 
    padding: 10px 50px; 
 
    background: lightgray; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content 
 
</div> 
 
</div>

来源

2017-02-16 22:37:30 LGSon

你可以做到这一点的一种方法是使用元素的background的linear-gradient。

像这样：

background: linear-gradient(to bottom, #49565f, #49565f 50%, #fff 50%, #fff);

你可以看到这个here的演示。

UPDATE

如果你想限制第一条带的大小，因此它并不总是50％，你可以设置一个background-size: 100% Xpx（Xpx是你想要的高度），然后设置background-repeat: no-repeat;所以不会重复。

查看此演示here。

来源

2017-02-16 22:26:30 zgood

它不是50％的高度为更轻的背景。有更多的内容下来。 –

@AbhimanyuPathania看看我的更新是否有所帮助 – zgood

我认为它仍然不起作用，因为其他颜色的渐变不是白色，而是更浅的灰色#efefef。该灰色需要填充页面的其余部分。 –

您可以使用一个div与背景颜色更低z-index，所以在技术上你必须：

body { 
background-color: Gray; } 
.dark-div { 
    z-index: 1; 
    background-color: DimGray; 
    position: absolute; 
    top: 0; 
    height: n px; // not sure what height should be } 
.content-div { 
    z-index: 10; }

编辑：不知道你的意思背景的内容而不是身体。如果您正在尝试使用内容div，则必须确保社交链接高度和底部背景颜色始终匹配。你可以用％或em值来做到这一点。

来源

2017-02-16 22:29:12

如果我们不知道身高，该怎么办？ –

如何使用CSS实现图像中所示的简单背景效果？

回答

相关问题