2014-10-02 87 views
0

首先我的問題是。我在bootstrap中編寫了一個parllex網站,我在該部分放了一個背景圖片。但是當我適應不透明時,不透明度適用於整個部分,但我不想。我只是希望不透明只在圖像上有效,而不是在文本上,我已經嘗試了所有我能理解的堆棧溢出解決方案。 plz幫助我。我的項目截止日期很近。這裏是代碼。只適用於背景上的不透明度

帶有引號的部分在這裏我必須應用圖像。但不希望我的文字不透明。

<!-- 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; 
} 
+1

你爲什麼不使用'背景:RGBA();'方法 – 2014-10-02 04:25:20

回答

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

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

我已經申請上不透明。3,試試這個,但RGBA在IE中,是要小心。

+0

你還應該加上'RGB(0,0,0)'的瀏覽器不支持RGBA。 – 2014-10-02 10:46:21

+0

嘿,我說過,我試過一切。沒有任何工作。我再次嘗試你的方法,它不工作 – user3448962 2014-10-03 16:01:32

0

使用此

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

下面

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

x更改爲需要的值。

檢查this鏈接,瞭解更多信息

+0

不工作的兄弟。再次出現同樣的問題,它正在消失整個部分。 – user3448962 2014-10-03 16:03:07

+0

有沒有jsfiddle? – Norah 2014-10-03 18:39:03