html - 如何使我的 div 背景具有不透明度而不是文本？

Question

我需要帮助使我的背景图像具有不透明度，但不是 div 中的内容？我该怎么做，我的代码有什么问题？我试过 opacty:numbers 和这个。

我当前的代码:

#bread_ui {
    background: url(../images/bread_ui.png);
    margin: 18px auto 15px auto;
    width: 1000px;
    height: 50px;
    border: 3px dotted #999;
    border-radius: 10px;
    -webkit-mask-image: -webkit-linear-gradient(right, rgba(0,0,0,1), rgba(0,0,0,.3));
}

.ui p {
    font-family: Arial;
    font-weight: bold;
    font-size: 13px;
    color: #000;
    font-variant: small-caps;
}

.ui a {
    text-decoration: underline;
    color: #000;
}

我的 html:

<div id="bread_ui" style="padding-top:25px;">
        <div class="ui" style="text-align:right; margin-right:15px"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>   
</div>

我的结果:http://prntscr.com/2z70bh

如您所见，该段落有一个线性渐变，我如何才能使它仅适用于背景图像？

Answer 1

你实际上可以把 background 放在线性渐变的前面

背景:-webkit-linear-gradient(right, rgba(0,0,0,1), rgba(0,0,0,.3));

文档: http://www.w3schools.com/css/css3_gradients.asp

这是 Jfiddle: http://jsfiddle.net/mCv25/