只适用于背景上的不透明度

首先我的问题是。我在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; 
}

来源

2014-10-02 user3448962

你为什么不使用'背景：RGBA（）;'方法 – 2014-10-02 04:25:20

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

到

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

我已经申请上不透明。3，试试这个，但RGBA在IE中，是要小心。

来源

2014-10-02 03:46:36

你还应该加上'RGB（0,0,0）'的浏览器不支持RGBA。 – 2014-10-02 10:46:21

嘿，我说过，我试过一切。没有任何工作。我再次尝试你的方法，它不工作 – user3448962 2014-10-03 16:01:32

使用此

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

下面

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

x更改为需要的值。

检查this链接，了解更多信息

来源

2014-10-02 03:59:43 Norah

不工作的兄弟。再次出现同样的问题，它正在消失整个部分。 – user3448962 2014-10-03 16:03:07

有没有jsfiddle？ – Norah 2014-10-03 18:39:03

只适用于背景上的不透明度

回答

相关问题