How to set both linear-gradient and background image in a specific div using styles in React

问题

I need to set linear-gradient as well as the background image on a specific div using styles in Reactsjs

I am able to get either of them, I mean to say either image or linear-gradient but not both at the same time

The image is going to overlap with the linear gradient

I tried below solution :

 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%)',
      }

Suggest me to to do this kind of stuff where I can use the image as well as linear-gradient on an image

Thanks

回答1:

Hope this will help. I think you forgot to add double quotes inside URL("link"). I have used hexa+alpha value in linear-gradient ( #50A684 - 80 ) 80 is 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%;
   }

回答2:

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

used backtick instead of qoutes

来源：https://stackoverflow.com/questions/53412372/how-to-set-both-linear-gradient-and-background-image-in-a-specific-div-using-sty