首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    毛玻璃实现图片缩略图

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

    1.2K10

    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.4K30
    领券