-1

私はウェブページのデザインにかなり慣れておらず、YouTubeを閲覧していたウェブサイトのレイアウトについて学びました。このビデオに出くわし、vloggerが彼のお気に入りのウェブサイトのデザイントップ5について説明しています。

ある時1:44、彼は1ページのデザインについて話し始め、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と同様の背景スタイル
  • 背景の2つのオマージュをくっつけます（下部に空白はありません）

    • 4

    1 に答える 1

    1

    SplitSecndは、想像するよりも簡単に構築できます。それらは透明な*.png画像を積み重ねています。たとえば、最初のものはここにあります：https ://www.splitsecnd.com/assets/images/core/road_crop_v3-min.png

    そこから、それらを積み重ねることができます。position: absolute;、、z-index: ...およびでdivを使用しtop: ...px;ます。

    z-indexが高いほど、「スタック」上で高くなります（z軸のように画面に近くなります）。位置トップを使用すると、divを互いに下に配置できます（y-asis）。画像の高さに近い値を使用してから、微調整する必要があります。

    于 2013-03-15T16:46:48.547 に答える