Image and text with opacity background in the same

问题:

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:

回答1:

<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;
}

回答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.

回答3:

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
}

回答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.