Jump to content
Search Community

Does xPercent affect background opacity?

Learning test
Moderator Tag

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys,

 

I have a div with a background rgba of 0, 0, 0, 0.5 and an image under it, essentially making a background image that looks slightly darker.

 

And I realised that when I use xPercent to move this div, the background rgba color disappears and my background image becomes fully opaque.

 

So my question is, does xPercent affect the opacity of backgrounds? Or am I doing something wrong?

Link to comment
Share on other sites

I don't know why moving a div would change the background color or image. We would have to see how you're coding it. Is it two divs stacked on top of each other? As I mentioned in your other thread, these things are difficult to troubleshoot without a CodePen demo. If you could provide demos for us, I'm sure we can diagnose the problem.

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Thanks. 

:)

  • Like 2
Link to comment
Share on other sites

  • Solution

Hello Learning,

 

Part of the reason is because you are using negative z-index -1 on ::after. You should never use negative z-index if you don't want to deal with cross browser shenanigans. You should set higher z-index values that are always positive to prevent this behavior. The reason being is various browsers will treat negative z-index differently and some will ignore or produce buggy behavior like you are seeing. Especially when you start nesting absolutely positioned elements with various negative z-index. which is just asking for trouble. ;)

 

You can just place a default z-index of 2 on your #slide1, #slide2 css rule and give your #slide1::after, #slide2::after a z-index of 1. So you dont have to mess will buggy negative z-index.

 

Plus is there any reason why you are applying your background image as the pseudo -element, instead of just applying each background to each slide div?

 

The opacity is not really opacity but is the alpha transparency of the background-color property, this negative z-index browser bug will cause a background-image to either disappear completely or become opaque when using rgba() for your background-color.

 

I adjusted the z-index for you (only use positive z-index).  I also added rotation: 0.01 to your tweens that are animating xPercent so they animate smoother in Firefox and MS Edge

 

See the Pen LxgQde by jonathan (@jonathan) on CodePen

#slide1, #slide2 {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 5em;
  color: white;
  z-index:2; /* add default z-index which is higher than ::after rule */
}

#slide1:after, #slide2:after {
  top: 0;
  left: 0;
  z-index: 1; /* dont use negative z-index, only use positive z-index to prevent bg opaque bug */
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background: url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg') no-repeat fixed center;
  background-size: cover;
}

:)

  • Like 4
Link to comment
Share on other sites

Hello Learning,

 

Part of the reason is because you are using negative z-index -1 on ::after. You should never use negative z-index if you don't want to deal with cross browser shenanigans. You should set higher z-index values that are always positive to prevent this behavior. The reason being is various browsers will treat negative z-index differently and some will ignore or produce buggy behavior like you are seeing. Especially when you start nesting absolutely positioned elements with various negative z-index. which is just asking for trouble. ;)

 

You can just place a default z-index of 2 on your #slide1, #slide2 css rule and give your #slide1::after, #slide2::after a z-index of 1. So you dont have to mess will buggy negative z-index.

 

Plus is there any reason why you are applying your background image as the pseudo -element, instead of just applying each background to each slide div?

 

The opacity is not really opacity but is the alpha transparency of the background-color property, this negative z-index browser bug will cause a background-image to either disappear completely or become opaque when using rgba() for your background-color.

 

I adjusted the z-index for you (only use positive z-index).  I also added rotation: 0.01 to your tweens that are animating xPercent so they animate smoother in Firefox and MS Edge

 

See the Pen LxgQde by jonathan (@jonathan) on CodePen

#slide1, #slide2 {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 5em;
  color: white;
  z-index:2; /* add default z-index which is higher than ::after rule */
}

#slide1:after, #slide2:after {
  top: 0;
  left: 0;
  z-index: 1; /* dont use negative z-index, only use positive z-index to prevent bg opaque bug */
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background: url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg') no-repeat fixed center;
  background-size: cover;
}

:)

 

Thanks for the detailed explanations and other useful information!

Ah, I added it as a pseudo element because I Google and found this to be the way to make background images 'appear' with opacity. You can stack background color and background image on the same div? I'll try it later on. Didn't know it's possible, thought that it will override one of them.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...