首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

毛玻璃实现图片缩略图

今天又双叒叕是做需求,发现产品给了一个缩略图排列起来的列表(虽然列表里只给了一个排列项,其他需要脑补)然鹅我发现!想象总是美好的,然而现实是非常骨感的! #背景 什么是毛玻璃效果?...就类似下面这种~~ 在页面中的图片缩略图列表,每张图片的大小,尺寸,宽高比一定不是一样的。。...在我的印象中,好像有一种效果,背景显示当前图片的虚化图,实际的图片显示在整个盒子的中间就好,类似我们今天实现的这种 怎么样?是不是效果不错??...background-position: center; background-repeat: no-repeat; } img { max-height: 100%; } 这样就实现了我们的毛玻璃图片缩略图预览的效果了...我们使用的是 filter: blur() 来实现的,这个样式在兼容性上还是可以的,目前主流的毛玻璃效果的网站都在使用 backdrop-filter: blur(); 来实现

1.1K10
您找到你想要的搜索结果了吗?
是的
没有找到

typecho缩略图加入根据标签缩略名输出缩略图

做出来的效果就是: 缩略图显示,依次是附件中的图片,若不存在,输出文章的第一张图片,若不存在,输出对应的tag缩略名图片,若是未配置的tag,则输出随机图片,若文章不存在tag,则输出随机图片。...首先在functions.php添加 /** 输出文章缩略图 */ function showThumbnail($widget) { // 当文章无图片时的默认缩略图 $rand =...rand(1,99); // 随机 1-99 张缩略图 $random = $widget->widget('Widget_Options')->themeUrl ....$rand . '.jpg'; // 随机缩略图路径 // $random = $widget->widget('Widget_Options')->themeUrl ....比如该篇文章标签名字是typecho,默认他的缩略名也是typecho,但我把它的缩略名改成了te,也就是说这篇文章的缩略图是te.jpg。

1.3K30

Android 实现图片生成卷角和圆角缩略图的方法

在 Android 的一些界面中,有时候我们需要为一副图片生成大小为 n * n 的缩略图,有时候需要的缩略图特殊一些,比如: 1、带圆角的缩略图: 如果我们需要带圆角的缩略图,但提供的图片是 n *...这个模式适合我们做带圆角的缩略图。...我们先在 Canvas 上绘制一个实心圆角矩形,其他部分透明,然后用这个模式把缩略图再绘制到 Canvas 上即可: Bitmap roundThumbBitmap = Bitmap.createBitmap...2、带 “卷角+圆角” 的缩略图: 有时候,我们需要为一张普通的图片生成 “卷角+圆角” 效果的图,像这样: ?...这时候,我们可以用两张辅助图来实现这个效果,一张底图做掩码,得到 “圆角+左上角切角” 的效果,然后用另一张图片覆盖在上面,得到 “灰色边框+右上角卷角” 的效果,我们需要的两张图如下: ?

1.2K10
领券