Правильное позиционирование размытого фонового изображения

Я пытаюсь создать страницу типа «профиль», где фон заголовка является размытой версией фотографии профиля. У меня проблемы с правильной работой наложения.Правильное позиционирование размытого фонового изображения

У меня есть пример здесь: jsbin

Вопрос заключается в том, что я не могу получить фон наложения остановиться на белой линии границы. Элемент '.bg img' принимает высоту/ширину элемента body вместо высоты/ширины 100% элемента div.profile-header. Зачем?

CSS:

.profile-header { 
    display: block; 
    text-align: center; 
    border-bottom: #fff 1px solid; 

    .bg { 
    position: fixed; 
    z-index: -1; 
    width: 100%; 
    height: 100%; 
    opacity: 0.7; 

    img { 
     position: absolute; 
     height: 100%; 
     width: 100%; 
     top: 0; 
     bottom: 0; 
     right: 0; 
     left: 0; 
     -webkit-filter: blur(15px); 
     -moz-filter: blur(15px); 
     -o-filter: blur(15px); 
     -ms-filter: blur(15px); 
     filter: blur(15px); 
    } 
    } 

    .profile-content { 
    z-index: 1; 
    } 

    .profile-img { 
    padding: 30px 5px; 
    display: block; 

    img { 
     max-width: 150px; 
     margin: 0 auto; 
     border-radius: 50%; 
    } 
    } 
}

HTML:

<body> 
    <div class="profile-header"> 
    <div class="bg"> <img src="http://www.twoorist.com/resources/images/uploads/images/97714346f8b6a5c10d716643eee28a8e.jpg"></div> 
    <div class="profile-content"> 
     <div class="profile-img"> 
     <img src="http://www.twoorist.com/resources/images/uploads/images/97714346f8b6a5c10d716643eee28a8e.jpg"> 
     </div> 
     <div class="header-content"> 
     <h2>John Doe</h2> 
     </div> 
    </div> 
    </div> 
    <p>Some content down here.</p> 
</body>

источник

2015-12-14 Zack

Это не ясно, что это должно выглядеть, но ваше позиционирование странная смесь. –

Привет @Paulie_D, спасибо, что посмотрели. Это самая близкая вещь, которую я мог найти при поиске в Google. Я хочу, чтобы фон заголовка был размытой версией фотографии профиля. См. Что-то подобное [здесь] (https://epic-pxls.s3.amazonaws.com/uploads/photo/fe3846b4-53c7-4921-b7cb-e663b68293dc.jpg) – Zack

Хм ... вам, возможно, придется перестроить структуру сделай это. Мне нужно подумать. –

Я прибрала позиционирование немного, не используя position:fixed помогает здесь, но главный трюк с использованием overflow скрытый на родителя.

Codepen Demo

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    text-align: center; 
 
    background: lightgrey; 
 
} 
 
.profile-header { 
 
    border: 1px solid grey; 
 
    position: relative; 
 
} 
 
.bg { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
.bg img { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: auto; 
 
    z-index: -1; 
 
    -webkit-filter: blur(10px) sepia(100%) hue-rotate(50deg); 
 
    filter: blur(5px) sepia(100%) hue-rotate(50deg); 
 
} 
 
.profile-img img { 
 
    border-radius: 50%; 
 
}

<div class="profile-header"> 
 

 
    <div class="bg"> 
 
    <img src="http://www.twoorist.com/resources/images/uploads/images/97714346f8b6a5c10d716643eee28a8e.jpg"> 
 
    </div> 
 

 
    <div class="profile-content"> 
 

 
    <div class="profile-img"> 
 
     <img src="http://www.twoorist.com/resources/images/uploads/images/97714346f8b6a5c10d716643eee28a8e.jpg"> 
 
    </div> 
 
    <div class="header-content"> 
 
     <h2>John Doe</h2> 
 
    </div> 
 
    </div> 
 
</div>

источник

2015-12-14 16:54:39

Вы можете получить большую часть пути, очищая свои position атрибуты.

.profile-header { 
    position: relative; 
} 
.profile-header .bg { 
    position: absolute; 

    /* this will crop the blurry edge to contain it perfectly above the white line */ 
    overflow: hidden; 
}

Положение .bg DIV теперь будет определена по отношению к положению .profile-header DIV (который является таким же высоким, как содержание, что она содержит), в отличие от предыдущих, где она была установлена по отношению к позиции из (которая высока, как и весь контент на странице).

Вы можете увидеть пример этого здесь:

http://jsbin.com/sajazoyiva/1/edit?html,css,output

источник

2015-12-14 16:45:59 Chris

Правильное позиционирование размытого фонового изображения

ответ

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