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

IT技术 css reactjs material-ui
2021-05-10 04:44:05

我需要使用 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%)',
      }

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

谢谢

2个回答

希望这会有所帮助。我认为您忘记在 URL("link") 中添加双引号。我在线性梯度 (#50A684 - 80) 中使用了 hexa+alpha 值,80 是 50% 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%;
   }
leftAdArea: {
  width: 380,
  height: 580,
  background:`url(obj.image) no-repeat, linear-gradient(135deg, #50A684 30%, #115E67 90%)`,
}

使用反引号代替 qoutes