0

Owing to the same RGBA value, i.e 0.0.0.0.5 repeated 4 times, surely this could be simplified?

#main > header {
  background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../.jpg");
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../.jpg");
  background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../.jpg");
  background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../.jpg");
}

The purpose of this code is for gradient values but there is no gradient - it is being used as opacity hence my question...so surely there is an easier approach and just have one line of CSS rather than all these variations?

Thanks for all help

Henry
  • 5,195
  • 7
  • 21
  • 34
  • 3
    Yes: you can also create a pseudo element that covers the entire header element with a background colour of `rgba(0,0,0,0.5)`. Also, there is really no need to prefix `linear-gradient` anymore: all evergreen browsers support the non-prefixed property today. – Terry Nov 22 '21 at 08:55
  • 1
    [Check the support of gradient](https://caniuse.com/css-gradients) Hint: Modern browsers don't need any of the prefixes. – cloned Nov 22 '21 at 08:56
  • They help to make some part of your code to work with all the browsers out there. Without them, you can make it work only on chrome or safari maybe but it wont work on mozilla or IE, so using these lines would allow all users to see whats going on, instead of just making it for some of them. PS: I meant about -webkit- , -moz- , -ms-. – Leo Ramadani Nov 22 '21 at 08:57
  • @LeoRamadani they don't help anymore for gradient. Even for IE it's not needed – Temani Afif Nov 22 '21 at 09:00
  • 1
    @LeoRamadani Typical case of prefix-itis. There is no need to prefixes for most browsers today. It's 2021. In fact, many `-ms-` prefixed properties don't even exist. – Terry Nov 22 '21 at 09:01
  • @TemaniAfif oh I thought they still do. Thanks for this info. – Leo Ramadani Nov 22 '21 at 09:01

0 Answers0