我如何使我的背景一个div有不透明度，但不是文本

Question

我需要帮助使我的背景图像有不透明度，但不是div内的内容?我如何做到这一点，我的代码有什么问题?我试过不透明:数字和这个。

我的当前代码:

#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放在线性渐变的前面

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/