Question

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

• here
• here
• here
• here

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

Answer 1

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