Question

首先我的问题是。我正在编写一个parllex网站的bootstrap我已经在部分推出了背景图像。但是当我对它不透明时，不透明度适用于整个部分，但我不想。我只是希望不透明度在图像上有效但不在文本上有效，我已经尝试了堆栈溢出的每个解决方案，我能理解。请帮助我。我的项目截止日期很接近。这是代码。

这里带有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">&nbsp;</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;
}

Answer 1

 background: url(../../img/parallax/1.jpg);

到

 background: url(../../img/parallax/1.jpg) rgba(0,0,0,0.3);

我已经在不透明度上应用.3，试试这个，但在IE中使用RGBA，是的，请小心。

Answer 2

使用此

filter:alpha(opacity=x); /* IE */
-moz-opacity:x; /* Mozilla */
opacity: x; /* CSS3 */

以下

background: url(../../img/parallax/1.jpg);

将x更改为所需值。

查看this链接以获取更多信息

仅在背景上应用不透明度

2 个答案: