用透明色设置背景图像，并使图像的高度适应内容 [英] 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);
}

我试图为图片设置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?

这是我的小提琴：小提琴

推荐答案

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

这篇关于用透明色设置背景图像，并使图像的高度适应内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！