Нанесите фильтр непрозрачности на фоновое изображение?

Я хотел бы применить непрозрачность над фоновым изображением на моей веб-странице.Нанесите фильтр непрозрачности на фоновое изображение?

Как это достичь? Я просто хочу это только на области изображения.

Вот мой номер JSFiddle.

HTML:

<header class="main-header " style="background-image:url('http://cdn.c.photoshelter.com/img-get/I00004urs0axX2VI/s/860/860/0801A130.jpg');"> 

     <div class="sticky-header"> 
      <div class="row"> 
       <nav class="medium-10 columns primary menu"> 
        <ul class="inline naked"> 
         <li><a href="">test</a></li> 
        </ul> 
       </nav> 
      </div> 
     </div>

CSS:

.sticky-header { 
padding-top: 30px; 
width: 100%; 
margin: 0 auto; 
position: fixed; 
z-index: 1000; 
background-color: #ffffff; 
background-size: auto 100%; 
border-bottom: 5px solid #f2f2f2; 
top: 0; 
left: 0; 
} 

.main-header { 
width: 100%; 
max-width: 1480px; 
position: fixed; 
background-image: url("http://cdn.c.photoshelter.com/img-get/I00004urs0axX2VI/s/860/860/0801A130.jpg"); 
background-position-y: -30px; 
background-repeat: no-repeat; 
background-size: auto 100%; 
background-position: center top; 
position: relative; 
transition: background-position ease-in 0.3s; 
height: 720px; 
margin: 0 auto; 
}

Спасибо за любую помощь

источник

2015-01-28 michaelmcgurk

Применить непрозрачность самого элемента. –

Я изначально пытался использовать 'background-color: rgba (255,0,0,0.5);' но это не сработало. Я собирался возиться с дополнительным «div» там и заполнить область заголовка, установив на нем небольшую непрозрачность. – michaelmcgurk

no thats right у вас может быть только цвет или изображение –

Вы можете использовать Псевдо элемент, так как вы не можете применить непрозрачность на фоне в CSS

.main-header { 
 
height: 720px; 
 
} 
 

 
.sticky-header { 
 
padding-top: 30px; 
 
width: 100%; 
 
margin: 0 auto; 
 
position: fixed; 
 
z-index: 1000; 
 
background-color: #ffffff; 
 
background-size: auto 100%; 
 
border-bottom: 5px solid #f2f2f2; 
 
top: 0; 
 
left: 0; 
 
} 
 

 
.main-header { 
 
width: 100%; 
 
max-width: 1480px; 
 
position: fixed; 
 
background-position-y: -30px; 
 
background-repeat: no-repeat; 
 
background-size: auto 100%; 
 
background-position: center top; 
 
position: relative; 
 
transition: background-position ease-in 0.3s; 
 
height: 720px; 
 
margin: 0 auto; 
 
z-index:1 
 
} 
 

 
.main-header:before{ 
 
    position: absolute; 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url("http://cdn.c.photoshelter.com/img-get/I00004urs0axX2VI/s/860/860/0801A130.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    left:0; 
 
    top: 0; 
 
    z-index: 0; 
 
    opacity: .4 
 
}

<header class="main-header"> 
 
     
 
    <div class="sticky-header"> 
 
     <div class="row"> 
 
      <nav class="medium-10 columns primary menu"> 
 
       <ul class="inline naked"> 
 
        <li><a href="">test</a></li> 
 
       </ul> 
 
      </nav> 
 
     </div> 
 
    </div> 
 
</header>

источник

2015-01-28 08:04:56

Большое спасибо за этот отличный ответ @Tambo! Мне было интересно, могу ли я использовать это на веб-сайте, где у каждой страницы есть другое фоновое изображение? – michaelmcgurk

@michaelmcgurk Конечно, вы можете, но вам нужно будет добавить класс к каждому из них, чтобы иметь возможность использовать разные фоны. –

Это была моя забота. Я подумаю. Я мог бы генерировать новые классы, зависящие от любых новых страниц, добавленных в систему, я полагаю. – michaelmcgurk

Непрозрачность не работает на фоновых изображений. Вы можете использовать непрозрачность только для элементов html.

Так что лучше всего поместить фоновое изображение внутри DIV без содержания и дать Дива значение непрозрачности

<div style=position:relative;"> 

    <div id="position:absolute; left:0;top:0;background" style="width:100%; height:100%; background-image:url(/path/to/img);opacity:0.6; z-index:1"> 

    </div> 

    <div id="content" style="width:100%; height:100%; z-index:2"> 
     Your content here 
    </div> 
</div>

источник

2015-01-28 08:02:48 Bernhard

Нанесите фильтр непрозрачности на фоновое изображение?

ответ

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