正確定位模糊背景圖像

我正在嘗試創建一個「配置文件」類型的頁面，其中標題的背景是配置文件照片的模糊版本。我無法讓疊加層正常工作。正確定位模糊背景圖像

我有一個例子在這裏：jsbin

的問題是，我不能讓後臺覆蓋停在白色的邊界線。 '.bg img'元素採用body元素的高度/寬度，而不是div.profile-header元素的高度/寬度100％。爲什麼？

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

目前還不清楚是什麼，這是應該的樣子，但你的定位是一個奇怪的混合物。 –

Hi @Paulie_D，感謝您的關注。這是我可以用谷歌搜索找到的最接近的東西。我希望標題的背景是個人資料照片的模糊版本。看到類似的東西[這裏]（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

正確定位模糊背景圖像

回答

相關問題