css - 仅使背景图像变灰，而不使 : 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;
}