[英]How do I make my background for a div have an opacity but not the text?
I need help making my background-image have an opacity but not the content thats inside the div? 我需要帮助使我的背景图像具有不透明度,但不需要div内的内容吗? How do I do this and what's wrong with my code?
我该怎么办?我的代码有什么问题? I've tried opacty:numbers and this.
我试过opacty:numbers和这个。
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: 我的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 我的结果: 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? 如您所见,该段落具有线性渐变,我该如何使它仅适用于背景图像?
You can actually just put background
in front of the linear gradient 您实际上可以将
background
放在线性渐变的前面
background: -webkit-linear-gradient(right, rgba(0,0,0,1), rgba(0,0,0,.3));
Documentation: http://www.w3schools.com/css/css3_gradients.asp 说明文件: http : //www.w3schools.com/css/css3_gradients.asp
Here's the Jfiddle: http://jsfiddle.net/mCv25/ 这是Jfiddle: http : //jsfiddle.net/mCv25/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.