🤩 New Cool Developer Tools for you. Explore →
FREE JavaScript Video Series Start Learning →
FLAT 75% OFF All Interactive courses at flat ₹250 / $3.25 only. HURRRRRY!! Explore now
  Signup/Sign In
Tests
MCQs to test your knowledge.
Forum
Engage with the community.
Compilers
Compilers to execute code in browser.
← Back to Questions
Ask Question
Not satisfied by the Answer? Still looking for a better solution?
Ask Question

How to give text or an image a transparent background using CSS?

Is it possible, to make the background of an element semi-transparent but have the content (text & images) of the element opaque?


p {

  position: absolute;

  background-color: green;

  filter: alpha(opacity=60);

  opacity: 0.6;

}



span {

  color: white;

  filter: alpha(opacity=100);

  opacity: 1;

}

<p>

  <span>Hello world</span>

</p>


It looks like child elements are subject to the opacity of their parents, so opacity:1 is relative to the opacity:0.6 of the parent.
css html
by

2 Answers

kshitijrana14
Either use a semi-transparent PNG image or use CSS 3:
background-color: rgba(255, 0, 0, 0.5);
Here's an article from css3.info, Opacity, RGBA and compromise (2007-06-03).
<p style="background-color: rgba(255, 0, 0, 0.5);">
<span>Hello, World!</span>
</p>
sandhya6gczb
The opacity property defines the transparency of an element. The opacity takes value from 0.0 to 1.0.
To include opacity in the image include
img {
opacity 0.4
}
to your stylesheet.

To make any text or other element transparent use
div {
opacity 0.6
}

Transparency can be added using RGBA. Use
div {
background : rgba(76, 175, 80, 0.7)
}

Login / Signup to Answer the Question.

LoginSignup