如何改变背景相同的xd设计?

Question

实际上，我正在为一个客户做一个比特币网站。xd文件由客户端提供。他打算以与设计相同的方式构建网站。然而，我只能提取文件main.png和bubble.png。我的网站左边的比特币图像和右边的黑屏和泡沫看起来不完全一样。我可以修复比特币的形象，但如何修复右边。为了实现与XD相同的结果，我需要对CSS代码进行哪些更改?有人能告诉我吗?

代码如下:

Sbody-part-main{
background-color: #674ADB; 
padding: 50px;
background-image: url("../../images/Checking/c2/main.png");

}

这是来自adobe xd的设计

我从Adobe xd(bubble.png)中提取的设计

我可以提取的第二张图片(main.png)

这是我创建的页面。但不知道如何实现相同的xd设计

Answer 1

你应该试试mix-blend-mode

<section>
<div class="overlay"></div>
<div class="decor"></div>
</section>

CSS:

section {
width: 100%;
height: 100vh;
background: url(https://i.stack.imgur.com/pRI6L.png) no-repeat center center;
background-size:cover;
background-blend-mode: lighten;
position: relative;
z-index: 0;
}
.overlay {
width: 100%;
height: 100vh;
background: #674ADB;
mix-blend-mode: screen;
position: relative;
z-index: 1;
opacity: 1;
}
.decor {
width: 100%;
height: 100vh;
background: url(https://i.stack.imgur.com/QsGz5.png) no-repeat right center;
mix-blend-mode: screen;
position: absolute;
top: 0;
left: 0;
z-index: 2;
opacity: 1;
}

这是jsfiddle: https://jsfiddle.net/tk5wuc0y/1/

注意:IE不支持mix-blend-mode，所以最好的办法是请求提取png文件。

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

Answer 2

在CSS中有一种使用下面代码的方法:

margin-right: <number>;
margin-left: <number>;

然而，如果你想把一个对象放在右边或左边(默认是左边)，你可以在CSS中这样做，margin-right: 0px;