[英]apply opacity only on background
首先,我的问题是。 我在bootstrap的parllex网站中编码一个,我在section中放置了背景图片。 但是,当我在上面不透明时,不透明度适用于整个部分,但我不想这样做。 我只希望不透明度仅对图像有效,而不对文本有效,并且我已经尝试了所有可以理解的堆栈溢出解决方案。 请帮助我。 我的项目截止日期临近。 这是代码。
具有ID引号的部分在这里我必须应用图像。 但是不想在我的文字上不透明。
<!-- inpirational quotes
===================================================================== -->
<section id="quotes" data-speed="10" data-type="background">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 section-heading animated"
style="text-align:center" data-animation="fadeInUp"
data-animation-delay="0">
<h2>Financial Services</h2>
<h1>Dedicated to Creating the Best Mobile
Financial Services Platform</h1>
<p class="line"> </p>
<div class="quotes-p">
<div class="items">
<div class="text">Over 2.5 billion people globally are not
supported by the traditional banking methods; they do not
have access to a bank account. The good news is that these
people have mobile phones and in most cases all they need
to complete a financial transaction. It is also essential
that people have a secure, safe, and seamless way to
manage their cash which is First Global Data's strength.
</div>
</div>
<div class="items">
<div class="text">LEADING EDGE TECHNOLOGY First Global has
developed world class industry leading proprietary
technology which allows the company to deliver a multitude
of secure financial services such as International Money
m Remittance, Loyalty and Rewards Programs.<br><br></div>
</div>
<div class="items">
<div class="text">First Global Money Inc., enables you to
send money "At any Moment, From Anywhere, to Anyone Around
the World”! <br><br><br><br></div>
</div>
</div>
</div>
</div>
</div>
</section>
CSS去这里
#quotes {
color: #fff;
}
#quotes {
background-attachment: fixed;
background: url(../../img/parallax/1.jpg);
background-repeat: repeat-y;
background-position: 50% 0;
background-size: cover;
}
#quotes h2 {
color: #FFF;
}
#quotes .line {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #fff;
margin-bottom: 30px;
width: 100px;
margin-left: auto;
margin-right: auto;
}
#quotes .text {
font-size: 22px;
font-weight: 300;
text-align: center;
}
#quotes .name {
color: #FFF;
font-size: 22px;
font-weight: 300;
text-align: center;
font-style: italic;
margin-top: 20px;
margin-bottom: 20px;
}
background: url(../../img/parallax/1.jpg);
至
background: url(../../img/parallax/1.jpg) rgba(0,0,0,0.3);
我已将.3应用于不透明度,请尝试使用此方法,但是IE中的RGBA,是的,请小心。
用这个
filter:alpha(opacity=x); /* IE */
-moz-opacity:x; /* Mozilla */
opacity: x; /* CSS3 */
下面
background: url(../../img/parallax/1.jpg);
将x更改为所需值。
检查此链接以获取更多信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.