如何将背景更改为与xd设计相同？答案

【问题标题】：How to change the background as same as the xd desgn?如何将背景更改为与xd设计相同？
【发布时间】：2021-12-11 06:22:53
【问题描述】：

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

代码如下：

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

【问题讨论】：

标签： html css css-selectors

【解决方案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

【讨论】：

它有效。非常感谢

【解决方案2】：

在 CSS 中可以使用下面的代码：

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

但是，如果您想将对象放在右侧或左侧（默认为左侧），您可以在 CSS 中像这样 margin-right: 0px;

【讨论】：

我需要将 main.png 右侧背景从暗色更改为与 xd 设计相同的蓝色发光。
margin-right 或 left 用于移动对象。但我的问题是我可以从 xd 设计中提取黑暗的 main.png 文件，但我必须与我提供的第一个链接一样