Set background image with transparent color and also make the height of the image adapt to the content

问题

.about {
  width: 100%;
  height: 300px;
  background-color: rgba(0,0,0,0.55);
}

I am trying to set a black color with 55% transparency to the image. Also I need the height of the image to be as long as the content. The content will be on some columns but at tablet and mobile resolution all the columns will go one under another so the content won't fit on the image.

Also I need the tranparency to affect only the image and not the text.

What is the best way to acheive this?

Here is my Fiddle: fiddle

回答1:

.about {
  width: 100%;
  height: 100%;
  position:relative;
}
.about:after{
   content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background:url('http://i.imgur.com/tENv1w4.jpg') no-repeat center center; 
    width: 100%;
    height: 100%;
    opacity : 0.55;
    z-index: -1;
}

.text {
  color: #fff;
  font-size: 22px;
  text-align: center;
}

Check this fiddle for your solution.

https://jsfiddle.net/n5qfa/89/

来源：https://stackoverflow.com/questions/44398224/set-background-image-with-transparent-color-and-also-make-the-height-of-the-imag