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

Question

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

我的网站包含一个绿色背景，中间有一个表单。您可以查看 jsFiddle here I simply want the image found 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

采样器解决方案，您可以使用 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

Answer 3

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

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

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

How to place an image beneath a semi-transparent layer?

html

css

image

opacity

transparent