Question

我希望将网页第一部分的背景混合到网页第二部分的弯曲背景下。以下是使用AdobeXD进行的设计

这是我到目前为止所拥有的。

.landing-header {
background: url("../images/BG1.png") no-repeat;
background-size: cover;
background-position: 0px -278px;
background-blend-mode: lighten;
height: 100%;
width:100%;
overflow-y: hidden;
min-width: 400px;
min-height: 732px;}

第二部分

.box1 {
background-image: url(../images/NBG_2.png);
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width:100%;
min-height: 2183px;}

我已经尝试过移动底部的背景图像，但是它根本没有融合，这是当前效果的一部分。

here

我认为也有必要展示这两种背景的模样，以便您了解我正在使用的背景。第二个在边缘具有透明度和阴影。 first 和 second

这是与两个背景相关的html代码。

<div class="landing-header">
<div class="landing-nav">
    <div class="landing-wrapper">
        <a href="#">TRAILER</a>
        <a href="#">UNIQUE FEATURES</a>
        <img class="logo" src="assets/images/LOGO%20ETHERUM.png" alt="logo">
        <a href="#">STARTERS HELP</a>
        <a href="#">PLAY NOW</a>
    </div>
</div>
<div class="landing-slogan">
    <p class="motto">RSPS TAKEN TO ANOTHER LEVEL</p>
</div>
<div class="landing-welcome">
    <img class="welcome" src="./assets/images/Hero%20Text.png">
    <p>Etherum is the longest active server, over 7 years online offering 
        very high quality content to players,<br>
        expect to see many unique content available only here at Etherum,<br>
        because we know what we are doing!
    </p>
</div>
</div>
</div>
<div class="section">
<div class="box1">
<h1 class="separator">TRAILER</h1>
<p>Check out our awesome trailer below to see what makes Etherum different 
than any other RSPS!</p>
<img class="video" src="assets/images/Vídeo.png">
<img class="hero" alt="hero" src="assets/images/HERO1.png"><
</div>

CSS混合背景

0 个答案: