How do I make my background for a div have an opacity but not the text?

Question

I need help making my background-image have an opacity but not the content thats inside the div? How do I do this and what's wrong with my code? I've tried opacty:numbers and this.

My current code:

#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;
}

My 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>

My result: http://prntscr.com/2z70bh

As you can see, the paragraph has a linear gradient to, how do I make it so it only applies to the background-image?

Answer 1

You can actually just put background in front of the linear gradient

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

Documentation: http://www.w3schools.com/css/css3_gradients.asp

Here's the Jfiddle: http://jsfiddle.net/mCv25/