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

Actually, I'm working on a bitcoin website for a customer. The xd file was provided by the client. And he intends to construct the website in the same manner as the design. However, I was only able to extract the files main.png and bubble.png. My website left side bitcoin image and the right side black screen and bubble not looking exact same. I can fix the bitcoin image but how to fix the right side. What changes need I make to my CSS code in order to achieve the same result as XD? Could someone please tell me?

The code is as follows:

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

CodePudding user response：

You should play around with 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;
}

Here is the jsfiddle: https://jsfiddle.net/tk5wuc0y/1/

Note: mix-blend-mode isn't supported in IE so the best idea is to ask for extracted png files.

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

CodePudding user response：

There is way in CSS using code from below:

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

However if you want to put an object to the right or left side (the default is left), you can do it in CSS like this margin-right: 0px;