Question

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

我正在尝试为图像设置55％透明度的黑色。另外，我需要图像的高度与内容一样长。内容将在某些列上，但在平板电脑和移动分辨率下，所有列都将在另一列之下，因此内容将不适合图像。

此外，我需要透明度仅影响图像，而不影响文本。

实现这一目标的最佳方式是什么？

这是我的小提琴：fiddle

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

检查这个小提琴你的解决方案。

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

设置透明色的背景图像，并使图像的高度适应内容

1 个答案: