0

You can see it done here http://qunitjs.com/ and broken down here http://jsfiddle.net/xMwT8/8/ *edit (http://jsfiddle.net/xMwT8/9/)

links are available

I am trying to use an image as a texture with an overlay color above or combined with the image to blend into a subtle texture. It can be done with a gradient (like in the first and second link I posted). I don't understand why it won't work with just a color (2nd link).

Community
  • 1
  • 1
dolphone bubleine
  • 691
  • 1
  • 8
  • 18

1 Answers1

3

I think you are asking why you can't do this with a solid color like #E4E2D6. The simple explanation is that it's a solid color :)

the jsfiddle example uses rgba(255, 0, 0, 0.3) which isn't a solid color, it's a 70% transparent red (the a == 0.3 means it's only 30% opacity)

If you want to do it with something like #E4E2D6, take a look at Convert RGB to RGBA over white and convert it to rgba(87, 74, 0, 0.16) which is the same color (when displayed over white, but it's mostly transparent) and will allow the background through.

Okay, just looked at the /9 fiddle (FYI you can just change the original link instead of putting an edit like that). It seems that this doesn't work with

background: rgba( ... ), url( ... );

Why? Because you can only have multiple background images. The -webkit-linear-gradient is an image as far as the browser is concerned, so it uses both. rgba( ... ) without it is a color, so it uses the image and the color as a fallback

Community
  • 1
  • 1
  • cheep cheep http://i1120.photobucket.com/albums/l493/powerfulcrunch/example1_zps774b3580.png | http://i1120.photobucket.com/albums/l493/powerfulcrunch/example2_zps9d9d11ea.png – dolphone bubleine Oct 16 '12 at 02:42
  • Are you trying to ask something with those screenshots? It needs to be a gradient because a gradient is an image and you can have multiple background __images__, but not a color and an image –  Oct 16 '12 at 02:44
  • youre right. the images have background-color still checked which is just what it was falling back to. to get the effect i want i would have to do overlays. thank you sir. - or the gradient solution – dolphone bubleine Oct 16 '12 at 02:49