仅灰色背景图像而不是灰色内的元素：CSS

Question

我有一个页面包装div的背景图片。我希望图像是0.5不透明的。我的问题是div内的所有其他项目也变为0.5不透明。如何避免这种情况？

#detailswrapper
{   
    background-size:cover; 
    background-repeat: no-repeat; 
    opacity:0.5;    
}

Answer 1

你可以使用这样的东西

JS Fiddle

div::after {
    content:"";
    background: url('http://www.psdgraphics.com/wp-content/uploads/2014/02/colorful-triangles.jpg');
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}