How to make semi-transparent background

Question

How to make semi-transparent background using css in element? but the content in not transparent too? sorry for bad english. Thank you.

Add this to your CSS `background-color:rgba(255,0,0,0.5)`. Increase or decrease the `0.5` to lower or raise the opacity. — Xareyo, Sep 03 '13 at 14:10
@MarsOne If he wants a semi transparent background-image it's a totally different question — Itay, Sep 03 '13 at 14:11
@Mr_Green: `opacity` would affect all the contents of the element, not just the background. — cHao, Sep 03 '13 at 14:14
@itay, i want background color to others. thank you for referrence. i am new in stack overflow, and i am beginner in programming. i need guidance from you are. one more thank you so much. — Agi Maulana, Sep 03 '13 at 14:18
Here's a third duplicate question for this: http://stackoverflow.com/questions/4790563/how-do-i-make-a-semi-transparent-background — danicotra, Oct 30 '16 at 19:55

score 18 · Accepted Answer · answered Sep 03 '13 at 14:14

18

use rgba background.

background: rgba(0, 0, 0, 0.5);

values are in order red intensity, green intensity, blue intensity

the decimal value is the opacity, and it runs from 0 to 1.

if you need to customize it without too many difficulties, check out: css3 maker

answered Sep 03 '13 at 14:14

Morrisda

1

If the element you're talking about isn't the `body` of the document, you can also use `opacity:(decimal from 0 to 1)` – cbr Sep 03 '13 at 14:22
@jCuber: If it doesn't contain anything other than the image, you mean. If you set `opacity: 50%` on a container, though, it fades out all of the element's contents as well. – cHao Sep 03 '13 at 14:26
@cHao Ah, good point. Anyways, the opacity attribute is also useful in cases :) – cbr Sep 03 '13 at 14:28
@jCuber: That it is. Even in this case, you could probably have a `:before` pseudo-element absolutely positioned and z-indexed, and set *its* opacity rather than the container's. But that is probably overthinking things. :P – cHao Sep 03 '13 at 14:37

1 Answers1