2014-10-02 3 views
0

Прежде всего моя проблема есть. Я кодирую на веб-сайте parllex в bootstrap, я поставил фоновое изображение в разделе. но когда я непрозрачность на нем, непрозрачность применяется для всего раздела, но я не хочу этого делать. я просто хочу, чтобы непрозрачность была эффективной только на изображении, но не на тексте, и я пробовал каждое решение для переполнения стека, которое я могу понять. 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();' метод –

ответ

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. –

+0

эй я сказал, я все испробовал. ничего не работает. я снова пробовал ваш метод, он не работает – user3448962

0

Используйте это

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

ниже

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

Изменение й на требуемое значение.

Проверить this ссылку для получения дополнительной информации

+0

Не работает bro. опять же та же проблема, что и в целом. – user3448962

+0

Есть ли jsfiddle? – Norah

Смежные вопросы