Question

这是image。

如何做到这种双重背景效果？如果可能的话，不分割包含个人信息和社交链接的重叠div。

Answer 1

您可以通过将linear-gradient用于元素的background来实现此目的。

像这样：

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

您可以看到此here的演示。

<强>更新

如果你想限制第一个条纹的大小，所以它不总是50％，你可以设置一个background-size: 100% Xpx（Xpx是你想要的高度），然后设置background-repeat: no-repeat;，这样它就赢了＃39 ;重复。

查看此here的演示。

Answer 2

最简单的和随内容缩放的是伪元素，这里使用var answ; var arr = []; do{ answ = prompt("What would like to do?"); if(answ == "new"){ var add = prompt("Add new todo: "); add = arr.push(answ); } else if(answ == "list"){ for(var i=0; i<arr.length; ++i){ answ = answ + arr[i] + '<br>'; } } else if(answ == "delete"){ var choose = prompt("Which one (index)?"); delete arr[choose]; } }while(answ !== "quit")

::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;
}

Answer 3

您可以使用背景颜色较低z-index的div，因此从技术上讲，您可以使用：

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值执行此操作。

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

3 个答案: