如何更改背景与xd设计相同？

Question

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

代码如下：

Sbody-part-main{

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

This is the design from the adobe xd

The design I extract from Adobe xd(bubble.png)

The second Image I could extract(main.png)

This is the page I've created. But don't know to how to achieve as same the xd design

Answer 1

CSS 中有方法使用下面的代码：

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

但是如果你想把一个对象放在右边或左边（默认是左边），你可以在CSS中像这样margin-right: 0px;

Answer 2

你应该玩玩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

如何更改背景与xd设计相同？

How to change the background as same as the xd desgn?

html

css

css-selectors