Image and text with opacity background in the same

Question

I'm trying to make an image and text with an opacity!

Background appear in the same div without using the image as background. How can I make this work?

Kindly see image:

Answer 1

The first thing you should do is to write HTML:

<figure>
    <img src="/image.jpg">
    <figcaption>Title</figcaption>
</figure>

After that you only have to write CSS: example:

figure {
  position: relative;
}
figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.3); // or transparent gif
}

Answer 2

/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.5 opacity */
background: rgba(0, 0, 0, 0.5);

For rgba the last field is the opacity. It's not fully supported in some older IE versions though so the only fully cross browser method at the moment is to use a transparent image as the background.

Answer 3

When you write background-color:rgba(0,0,0,50); the background will be black and semi-transparent.

It won't affect the transparency of the text because to set the transparency of the text, it's color:rgba(255,255,255,50); If you don't write that, the text won't be semi-transparent.

Answer 4

<div>
  <span>Title</span>
  <img src="" />
</div>

div{
  position: relative;
}
span{
  background: rgba(0,0,0,0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 6px;
  display: block;
}