Изменить прозрачность только фона

196

26 ноября 2016, 18:38

Доброго времени суток. Есть код

.block-theree{background-image:url('../image/3.png');}

<div class="row block-theree"> 
  <div class="large-12 columns text-center"><h3 class="white font-opensans bold">TRAIN RIDES</h3></div> 
</div>

Могу ли я как нибудь изменить прозрачность фона при этом не менять прозрачность текста?

Answer 1

Например с псевдоэлементом и абсолютами:

.block-theree{ 
  position: relative;  
} 
 
.block-theree:before { 
  content: ''; 
  position: absolute; 
  z-index: 1; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background-image:url(https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg); 
  -webkit-background-size: cover; 
  background-size: cover; 
  background-position: center; 
   
   opacity: .5; 
} 
 
.block-theree div { 
  position: relative; 
  z-index: 2;   
  opacity: 1; 
}

<div class="row block-theree"> 
  <div class="large-12 columns text-center"><h3 class="white font-opensans bold">TRAIN RIDES</h3></div> 
</div>

Или с градиентом:

.block-theree{ 
  position: relative;  
  background-image: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)), url(https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg); 
  -webkit-background-size: cover; 
  background-size: cover; 
  background-position: center; 
} 
 
.block-theree div {   
  /*height: 200px;  высота только для наглядности */ 
}

<div class="row block-theree"> 
  <div class="large-12 columns text-center"><h3 class="white font-opensans bold">TRAIN RIDES</h3></div> 
</div>

Answer 2

Примените элемент стилей opacity:

.block-theree{background-image:url('../image/3.png');opacity: 0.5;}

значение определите самостоятельно. Для IE8 или ранее (хотя это большой вопрос: Надо ли поддерживать старые браузеры?) можете применить:

filter:alpha(opacity=50);

Инфо W3

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не отображаются боковые границы QGroupBox

У меня есть приложение Qt и в одном окне внутри QScrollArea и verticalLayout есть QGroupBox с таким css:

178

CSS

Разное значение функции $.height() в разное время

Прогуглил - не помогло, прогуглил на английском - тоже не помогло, пришел на добрый старый StackoverflowИтак, сразу к делу

194

CSS

Сделать двойное поведение ссылки

ЗдравствуйтеЕсть мобильное иерархическое меню, оно всегда показывается раскрытым

172

CSS

Проблемы в работе с Google Maps API

Здравствуйте! Нахожусь в несколько затруднительной ситуации: имеется несколько карт: на главной и другой страницеПроблема в том, что мне...

285