Question

我知道以前曾经问过这个问题，但我找不到有效的解决方案！

我的网站包含一个绿色背景，其中间有一个表单。您可以查看jsFiddle here我只想将找到的图像here放在您看到的绿色图层下方。图像不应该被拉伸 - 只需用50％的不透明度填充绿色层。

目前生成绿色层的代码是：

#mainarea {

 height:900px;
  background: #2ecc71 no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: "Roboto";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#mainarea::before {
  z-index: -1;
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  background: white;
  /* IE Fallback */
  background: white;
    width: 100%;
  height: 100%;
}

感谢您的帮助！

Answer 1

我做了一些编辑：检查http://jsfiddle.net/h6ckedw6/2/

为图片添加了新的div

.bg{
    background:url(http://40.media.tumblr.com/9ba0ef66d65ee159bd1d8623964ffc8f/tumblr_njqrueR0gx1tkairwo1_1280.jpg) no-repeat top left;
    background-size:cover;
    width:100%;
 height:900px;
    position:fixed;
    z-index:-1;
}

Answer 2

你可以通过设置背景来获得这种效果

结帐链接下方 http://jsfiddle.net/h6ckedw6/5/ background-color:rgba(2,236,199,0.5);

Answer 3

采样器解决方案，您可以使用photoshop或任何其他图像编辑器在图像上显示所需的颜色，然后使用不透明度，然后使用background-image，如下所示：

#mainarea {

 height:900px;
  background: #2ecc71 no-repeat center center fixed;
  background-image: url(http://s2.postimg.org/cp3x1a0w9/tumblr_njqrue_R0gx1tkairwo1_1280.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: "Roboto";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}

link 到修改后的图片

<强> Live Demo

如何将图像放在半透明层下面？

3 个答案: