只灰色背景图像，而不是内部元素：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; 
}