Question

我需要使用Reactsjs中的样式在特定的div上设置线性渐变以及背景图像

我能够得到它们中的任何一个，我的意思是说图像或线性渐变，但不能同时显示

图像将与线性渐变重叠

我尝试了以下解决方案：

 leftAdArea: {
      width: 380,
      height: 580,
      background: 'url(https://www.mahealthcare.com/assets/images/clinic/NursePhone.jpg) no-repeat , linear-gradient(135deg, #50A684 30%, #115E67 90%)',
      }

建议我做这种事情，以便可以在图像上使用图像以及线性渐变

谢谢

Answer 1

希望这会有所帮助。我认为您忘记在URL（“ link”）中添加双引号。我在线性渐变（＃50A684-80）中使用hexa + alpha值是80％alpha。

     leftAdArea:{
   width: 200px,
   height: 200px,
   background-image:"linear-gradient(135deg, #50A68480 30%, #115E6780 90%), url('https://www.mahealthcare.com/assets/images/clinic/NursePhone.jpg')";
   background-repeat:no-repeat;
   background-position:50%;
   }

Answer 2

leftAdArea: {
  width: 380,
  height: 580,
  background:`url(obj.image) no-repeat, linear-gradient(135deg, #50A684 30%, #115E67 90%)`,
}

使用反引号代替qoutes

如何在React中使用样式在特定的div中设置线性渐变和背景图像

2 个答案: