我对网页设计相当陌生,了解我浏览YouTube的网站布局,我遇到了this video,其中vlogger解释了他最喜欢的5个网站设计。
在1:44
时,他开始谈论单页设计和谈论SplitSecnd。我喜欢他们的背景设计方式。
我知道如何为div
元素提供不同的背景图像或颜色,但我想知道如何创建相似或复制其背景?他们的背景有图像和切出的三角形,然后一个新的部分开始:)
对此有任何帮助将不胜感激。我很感激用一些示例代码解释:)
<!DOCTYPE html>
<html>
<title> Lot of Divs </title>
<style>
body{
margin: 0;
padding: 0;
}
.content{
width: 1280px;
height: 800px;
font-family: "Courier New",monospaced;
font-size: 18px;
color: white;
}
#div1{
background-image: url("../img/mentalist-1.jpg");
background-repeat: no-repeat;
margin: 0;
padding: 0;
}
#div2{
background-image: url("../img/prisonbreak-1.jpg");
background-repeat: no-repeat;
margin: 0;
padding: 0;
}
p{
text-align: justify;
}
</style>
<body>
<div class = "content" id="div1">
<p>
An infamous 'psychic' abandons his public persona, outing himself as a fake, to focus on his work as a consultant
for the California Bureau of Investigation in order to find "Red John," the madman who killed his wife and daughter.
</p>
</div>
<div class = "content" id="div2">
<p>
Structural Engineer Michael Scofield turns himself in to the Fox River Penitentiary in order to break out his brother Lincoln Burrows,
who is on death row for the murder of the Vice President's brother.
But Lincoln was set up by some of the Company (an agency formed by corrupt government officials) guys,
headed by General Jonathan Krantz. Michael breaks out from Fox River with his brother Lincoln and other convicts
</p>
</div>
</body>
</html>
我想要达到的目的是:
答案 0 :(得分:1)
SplitConnd比您想象的更容易构建。它们堆叠透明* .png图像。例如,第一个是:https://www.splitsecnd.com/assets/images/core/road_crop_v3-min.png
从那里你可以叠加它们。使用包含position: absolute;
,z-index: ...
和top: ...px;
的div。
z-index越高,“堆叠”越高(离屏幕越近,如z轴)。位置顶部允许您将div放在彼此下方(y-asis)。您必须使用接近图像高度的值,然后对其进行微调。