2 回答

TA貢獻1824條經(jīng)驗 獲得超8個贊
你可以用 CSS 實現(xiàn)類似的東西
考慮使用這個樣式表
<style type="text/css">
.blured {
width:320px;
height:320px;
position: relative;
overflow: hidden;
}
.blured .blur {
height:70px;
width:100%;
position:absolute;
filter: blur(7px);
}
.blured .top {
top:0px;
background: linear-gradient(#000000d9, #00000000)
}
.blured .bottom {
bottom:0px;
background: linear-gradient(#00000000, #000000d9)
}
</style>
然后使用以下標記
<div class='blured' style='background-image:url("http://placekitten.com/320/320")'>
<div class='blur top'></div>
<div class='blur bottom'></div>
</div>
結(jié)果將是這樣的:
您可以嘗試使用linear-gradient
顏色和值blur()
來實現(xiàn)接近您要求的輸出。

TA貢獻2003條經(jīng)驗 獲得超2個贊
你描述的效果其實是可以實現(xiàn)的。您只需要在圖像頂部堆疊尺寸較小的相同圖像。然后可以模糊下面的圖像,它將跨越該400px x 400px區(qū)域的其余部分。
為此,您需要將position封閉的字段設(shè)置div為 ,relative并將兩個圖像的字段設(shè)置為absolute。我已將位于頂部的圖像的高度降低到200px并保持圖像寬度與下面的圖像相同,以類似于問題中圖像的樣式。用于filter: blur()模糊較大的圖像。模糊會柔化圖像的邊緣(刪除該clip屬性,您就會知道)。使用該clip屬性使邊緣看起來“清晰”。
我用過這張圖片。運行下面的代碼片段以查看它的實際效果:
<!DOCTYPE html>
<html>
<style>
*{box-sizing: border-box;}
.container {
margin: auto;
position: relative;
width: 50%;
}
.outer {
filter: blur(5px);
position: absolute;
z-index: -1;
clip: rect(0,400px,400px,0);
}
.inner {
position: absolute;
top: 100px;
}
</style>
<div class="container">
<img src="https://i.stack.imgur.com/Y1ELT.jpg" class="outer" height="400px" width="400px">
<img src="https://i.stack.imgur.com/Y1ELT.jpg" class="inner" height="200px" width="400px">
</div>
</html>
這回答了你的部分問題?,F(xiàn)在,要根據(jù)尺寸自動放置圖像,您可以使用 JavaScript 檢索和更新圖像尺寸:
var image = new Image();
image.onload = function() {
var height = image.height;
var width = image.width;
}
image.src = "<source>";
下面的圖像將永遠是400 x 400 px,您可以根據(jù)其實際檢索到的尺寸更新頂部圖像的屬性,如果它小于400 x 400 px. 否則,將其壓扁400 x 400 px以覆蓋下面的整個圖像。
添加回答
舉報