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

我需要帮助，使我的背景图像有一个不透明度，但不是在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>

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔因疏忽而死亡外，还必须为动物的劳动负责。

我的结果是：

---

如您所见，段落具有线性渐变，如何使其仅适用于背景图像？

您实际上可以将

背景

置于线性渐变之前

background:-webkit线性渐变（右，rgba（0,0,0,1），rgba（0,0,0,3））

文件：

下面是JFIDLE：
可能存在的副本