Question

我需要帮助使我的背景图像具有不透明度但不包含div内的内容？我该怎么做以及我的代码有什么问题？我试过了opacty：数字和这个。

我目前的代码：

#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/

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

1 个答案: