Используйте div как маску на фиксированном изображении

Я хотел бы иметь конкретный дизайн на веб-странице, которую я проектирую.Используйте div как маску на фиксированном изображении

Основная обертка содержит последовательность <div class='section'> и <div class='section-header'>. section-header должен отображать заголовок раздела над изображением.

Exemple:

<div id="tag" class="section-header"> 
    <h1>Title</h1> 
    <img src="assets/img/some_image.jpg"> 
</div>

До сих пор мой КСС:

.section-header 
{ 
    width:   100%; 
    height:   192px; 
    overflow:   hidden; 
} 
.section-header > * 
{ 
    width:   100%; 
    line-height:  192px; 
    margin:   0; 
} 
.section-header > h1 
{ 
    position:   absolute; 
    z-index:   10000; 
    text-align:  center; 
} 
.section-header > img 
{ 
    filter:   opacity(50%); 
}

однако я хотел бы добавить некоторые относительное перемещение между фоновым изображением и section-header. Я в основном хотел зафиксировать изображение на экране с position: fixed; и позволить overflow: none; выполнить эту работу.

Однако представляется, что как только я добавить position: fixed; top: 0; к .section-header > img, переполнение не скрывается больше, и изображение отображается независимо от положения заголовка он вложен в.

Как я могу решить это?

Редактировать: код проекта можно увидеть here. Я бы в основном имел изображение за заголовком каждого раздела, чтобы не прокручивать страницу, и просто чтобы заголовок секции показывал его, как вы scrool

источник

2016-09-15 Amxx

вы не можете использовать IMG в качестве фона? можете ли вы clariyf что * некоторое относительное движение * означает ... также ожидаемый результат как img, возможно, – DaniP

Если я понимаю, эффект, который вы хотите, вы, возможно, потребуется использовать img в качестве фона; попробуйте это:

body{ 
 
    background: #f3f3f3; 
 
    height:800px; 
 
} 
 
div { 
 
    text-align:center; 
 
    color:white; 
 
    width:80%; 
 
    margin:150px auto; 
 
    line-height:200px; 
 
    background:url('http://lorempixel.com/600/600') no-repeat center; 
 
    background-attachment: fixed; 
 
} 
 
div h1 { 
 
    font-size:3em; 
 
}

<div> 
 
    <h1>Mytitle</h1> 
 
</div>

Jsfiddle Demo

источник

2016-09-15 16:07:07 DaniP

Это очень приятное решение, за исключением того, что оно не очень эффективно для изменения изображения для каждого заголовка на уровне HTML. Я нашел решение с помощью клипа: rect в выделенном div (см. Ссылку) – Amxx

хорошо, вы можете легко изменить только bg-изображение для каждого контейнера с nth-child или присвоить классу классов @Amxx, и я думаю, что он лучше поддерживается. – DaniP

Переполнение игнорируется для position:absolute дочерних элементов в родительском объекте, который расположен относительно.

Один из способов устранения неполадки дает .section-header a position:absolute или position:fixed. (в зависимости от того, что вам больше всего подходит).

так:

.section-header 
{ 
    width:   100%; 
    height:   192px; 
    overflow:   hidden; 
    position:   absolute; 
}

see this jsfiddle

источник

2016-09-15 15:05:40

Используйте div как маску на фиксированном изображении

ответ

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