作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如何模糊图像的一侧以创建从图像到背景的良好过渡?
我能够通过这个小技巧做到这一点:
.wrapper {
width: 200px;
height: 250px;
overflow: hidden;
}
.image-blurred {
background-image: url('http://lorempixel.com/200/200/city/9');
width: 200px;
height: 200px;
filter: blur(15px);
position: relative;
}
.frontimage {
position: absolute;
top:0px;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
<div class="wrapper">
<div class="image-blurred"></div>
<div class="frontimage"><img src="http://lorempixel.com/200/200/city/9"></div>
</div>
-webkit-mask-image
不是一个可靠的选择。
最佳答案
你需要正确写掩码,它是可靠的https://caniuse.com/#feat=css-masks (仅不支持 IE,这并不奇怪)
您还可以简化您的代码,如下所示:
.frontimage img {
filter: blur(15px);
}
.frontimage {
position:relative;
display:inline-block;
padding-bottom:50px;
overflow: hidden;
}
.frontimage::after {
content:"";
position:absolute;
background-image: url('http://lorempixel.com/200/200/city/9');
top: 0;
left:0;
right:0;
bottom:50px;
-webkit-mask-image: linear-gradient(to bottom, #fff, transparent);
mask-image: linear-gradient(to bottom, #fff, transparent);
}
<div class="frontimage">
<img src="http://lorempixel.com/200/200/city/9">
</div>
关于html - 模糊图像的一侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62051623/
这可能是一个愚蠢的问题,但是要求图中顶点的最小集合的规范问题是什么,以便从这些顶点开始,所有其他顶点都可以通过“旅行”不超过一条边到达? 现实生活中的应用是:我需要认识哪些人,才能与地球上的其他人仅通
当浏览器在伪元素溢出并导致问题后调整绝对定位大小时。我正在寻找解决此问题的方法。只需调整浏览器大小,直到出现标题文本。 这是问题的演示:http://codepen.io/anon/pen/grKNo
我编写的 java 应用程序遇到了导致硬件性能问题的问题。问题(我相当确定)是我运行该应用程序的一些机器只有 1GB 内存。当我启动 java 应用程序时,我将堆大小设置为 -Xms 512m -Xm
Article 与 Medium 具有单向 ManyToOne 关系,它与下面的代码配合良好:保存和删除文章成功。 我想知道 JPA 是否有一种优雅的方式来删除最后一个子实体(在本例中为medium)
我想弄清楚如何在我的预约表格中将医生列表作为radio_buttons。现在,如果我使用“f.input :physician_id, :as => :radio_buttons”,我会得到一个“是/
我是一名优秀的程序员,十分优秀!