我正在尝试模糊分别位于 flexbox 内的 3 个图像,但经过多次尝试后,我已经没有想法了。我试图将鼠标悬停在几乎每个 div 组合上,例如。 .categories .row1 .column1。 img:hover 使用 filter:blur()。任何这些都不起作用。
这是html代码:
<div class="categories">
<div class="row1">
<div class="column1">
<img src="imgs/main-page/1.jpg" alt="Sesje zdjęciowe" style="width:100%">
</div>
</div>
<div class="row2">
<div class="column2">
<img src="imgs/main-page/2.jpg" alt="Imprezy okolicznościowe" style="width:100%">
</div>
</div>
<div class="row3">
<div class="column3">
<img src="imgs/main-page/3.jpg" alt="Klienci firmowi" style="width:100%">
</div>
</div>
这是一个 CSS 样式:
.categories {
display: flex;
height: 92vh;
}
.row1,
.row2,
.row3 {
display: flex;
height: 92vh;
flex: 33.33%;
}
.column1 {
flex: 33.33%;
padding: 0px 3px 0px 0px;
}
.column2 {
flex: 33.33%;
padding: 0px 3px 0px 3px;
}
.column3 {
flex: 33.33%;
padding: 0px 0px 0px 3px;
}
.column1 img,
.column2 img,
.column3 img {
height: 92vh;
}
答案 0 :(得分:0)
您可以使用 filter
属性和 blur()
函数来创建模糊效果。
.categories {
display: flex;
height: 92vh;
}
.row1,
.row2,
.row3 {
display: flex;
height: 92vh;
flex: 33.33%;
}
.column1 {
flex: 33.33%;
padding: 0px 3px 0px 0px;
}
.column2 {
flex: 33.33%;
padding: 0px 3px 0px 3px;
}
.column3 {
flex: 33.33%;
padding: 0px 0px 0px 3px;
}
.column1 img,
.column2 img,
.column3 img {
height: 92vh;
}
img:hover {
filter: blur(5px);
}
<div class="categories">
<div class="row1">
<div class="column1">
<img src="https://i.picsum.photos/id/901/300/300.jpg?hmac=8-Zxyl2URaVHsQFbRJNKJ52yofy7UGOXSOPAa_bepfs" alt="Sesje zdjęciowe" style="width:100%">
</div>
</div>
<div class="row2">
<div class="column2">
<img src="https://i.picsum.photos/id/914/300/300.jpg?hmac=ghkx68JWW6IEeaozmhAeyojhquNUUoGhH1ULrp0DwpE" alt="Imprezy okolicznościowe" style="width:100%">
</div>
</div>
<div class="row3">
<div class="column3">
<img src="https://i.picsum.photos/id/256/300/300.jpg?hmac=NY-Kc_0T-LRop_egfEehw6sHGvf-vHsyL6CBFUJyaWQ" alt="Klienci firmowi" style="width:100%">
</div>
</div>
参考:filter CSS