-1

我对网页设计和了解我正在浏览 YouTube 的网站布局相当陌生，我看到了这个视频，视频博主解释了他最喜欢的 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>

我想要实现的是：

  • 背景风格类似于SplitSecnd
  • 让背景中的两个图像粘在一起（底部没有空格）

    • 4

    1 回答 1

    1

    SplitSecnd 的构建比您想象的要容易。他们正在堆叠透明的 *.png 图像。例如第一个在这里：https ://www.splitsecnd.com/assets/images/core/road_crop_v3-min.png

    从那里你可以把它们堆叠起来。使用 div 和position: absolute;,z-index: ...和top: ...px;。

    z-index 越高，它在“堆栈”上的位置就越高（离你的屏幕越近，就像 z 轴一样）。位置 top 允许您将 div 放置在彼此下方（y-asis）。您必须使用接近图像高度的值，然后对其进行微调。

    于 2013-03-15T16:46:48.547 回答