Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Richard Ryu

Image backgroundColor does not apply

Recommended Posts

Hi, I'm wondering why my image does not change background color with "rgba"?

 

-- html --

<img src="/a.jpg" class="subpageBack">

 

-- script --

TweenLite.to(".subpageBack", 1, {backgroundColor:"rgba(0,0,0,0.65)", ease:Cubic.easeOut});

 

I'm just changing background color when the button has clicked.

See the Pen VayGJB by RichardSouth (@RichardSouth) on CodePen

Link to comment
Share on other sites

Since you just want it to darken, you could do that by putting a black div above the image and tweening the opacity (autoAlpha)... like this: 

See the Pen ONzaQj by ohem (@ohem) on CodePen

 

 

Edit: or to avoid an extra "overlay" div, you could also use pseudo elements and the CSS Rule plugin like this: 

See the Pen NNXeKL by ohem (@ohem) on CodePen

 

Edit2: Just realized I was over complicating things with that first edit; you can skip the pseudo element & just put the image in a div with a black background, and then animate the opacity of the image itself, like this: 

See the Pen WwdmNO by ohem (@ohem) on CodePen

  • Like 3
Link to comment
Share on other sites

You really cant change the background-color of an <img> tag, unless that image is using a transparent png or gif ! Otherwise you wont see the color change since the image from the src would be covering up the background-color ;)

 

Unless you meant change the tint of the <img> tag with a CSS Filter like Blake's example above? 

  • Like 1
Link to comment
Share on other sites

You referenced running but didn't call it, put () after running so it looks like this running()

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.
×