Image And Text With Opacity Background In The Same Div

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:

Solution 1:

<div><span>Title</span><imgsrc=""/></div>div{position:relative;}span{background:rgba(0,0,0,0.5);position:absolute;bottom:0;left:0;padding:6px;display:block;}

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

Solution 3:

The first thing you should do is to write HTML:

<figure><imgsrc="/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
}

Solution 4:

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.