将两个背景合并为一个

Question

下面是我正在转换成 ReactJS 页面的 figma 设计图片，背景由如下渐变组成

background: linear-gradient(180deg, #E5EFFF 0%, rgba(229, 239, 255, 0.262661) 83.7%, rgba(229, 239, 255, 0) 100%);

但是正如您在背景中看到的那样，页面右侧有另一条白色大线（图像），那么我如何才能将图像单独与背景合并在一起？感谢反馈

Answer 1

您可以为元素应用多个背景，像这样。

.bg1 {
width: 100%;
  height: 400px;
  background-image: url(https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png),
      linear-gradient(180deg, #E5EFFF 0%, rgba(229, 239, 255, 0.262661) 83.7%, rgba(229, 239, 255, 0) 100%);
  background-repeat: no-repeat,
      no-repeat;
  background-position: top right,
      right;

}

<div class="bg1"></div>

将两个背景合并为一个

Merging two backgrounds into one

css

reactjs

image

background

figma