给图片加个自适应颜色的阴影

最新推荐文章于 2021-09-09 15:50:31 发布
最新推荐文章于 2021-09-09 15:50:31 发布
阅读量372 收藏
点赞数 1
分类专栏： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44599055/article/details/107399679
版权

一个牛逼的设计师真的会让前端感到自己无比的垃圾
流下了没技术的泪水
这两天设计师给我丢来个这东西
效果图
要求里面能换图片，阴影需要根据图片内容自动适应颜色
快看，那个学前端的上吊了
用box-shadow肯定是不行了，别说自适应图片，弄成渐变色都不行
不过机智的我怎么能做不出来呢😏

实现自适应图片颜色的阴影

先画出来要放图片的部分
然后复制一份
其中一份加上一个样式filter: blur(20px);
对，没错，就是高斯模糊
然后通过定位或其他方法把这两个重叠到一起

换张背景
这样换张背景也依然可以看出适应图片的阴影

把上面一层隐藏掉
这是把上面一层隐藏掉的效果

花样模糊
笑到模糊

Tippye
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
生成阴影，根据image主色来设置阴影，切成圆角之类的阴影仍然存在
GofeyLee的博客
04-28 1578
仿照一个GitHub安卓端效果做的，可以根据图片的主题色显示不同的阴影 项目下载地址： https://github.com/gofey/MagicShadowMaker 使用方式很简单     ImageShadowView *imageView = [[ImageShadowView alloc] initWithFrame:CG
Imitating-Artistic-Style-on-Automatically-Curated-and-Shaded-Sketches:在此项目中，最初，我们使用自适应阈值从给定的漫画（日本漫画）角色的图像中选择线条艺术草图，然后部署Generative Adversarial Network来自动对草图进行阴影处理，在其中从像素的大量集合中学习像素级兼容的颜色图片。 在稍后的实验中，我们使用一组样本艺术图像将样式转移到先前生成的阴影图像上，从而使用VGG-19预训练模型创建具有高感知质量的艺术图像。
04-30
最初，我们使用自适应阈值从给定的漫画（日本漫画）角色的图像中选择线条艺术草图，然后部署Generative Adversarial Network来自动对草图进行阴影处理，在其中从像素的大量集合中学习像素级兼容的颜色图片。...
魔方财务用户中心主题QRuser-正版有售后
最新发布
03-30
魔方财务用户中心主题QRuser-正版有售后 本主题支持魔方财务3.5.7版本！可自由切换魔方财务3.5.7版本与其他版本。 本主题基于官方default开发，主要面向企业，三端自适应，支持并完美适配多语言。 界面精美，简洁清新，主题内新增多处bootstrap-select的调用。 所有卡片类型div均加入阴影，去除原输入框的阴影，按钮以及输入框选中后加入框外动效。 功能列表：自定义顶栏用户头像，自定义侧栏默认状态，自定义用户中心首页背景图片，自定义登录/注册/重置密码页面背景图片，自定义用户中心首页弹窗公告，自定义用户中心首页弹窗公告顶栏颜色/确认按钮颜色，自定义css，自定义js，启用主题自带圆角，自定义顶栏背景颜色，启用顶栏透明虚化，启用主题自带拟态，启用主题自带Loading加载，自定义Url徽标等等功能。 购买主题包更新 ，包售后。 需要的可以点击下方联系我，购买后联系我提供源文件(开源)，没有授权，可二次转卖。[微笑] 虚拟产品，具有复制性，一旦购买拒不退款
嵩嵩图片管理系统V8.0
07-30
1.安装环境 嵩嵩图片管理系统v8.0 UTF-8 安装时不需要作任何修改即可正常运行 智能识别目录，可以放在任意目录下访问 请在iis环境下使用本系统。 需要AspJpeg水印组件支持 2.常见问题 1.后台路径 admin/ 帐号密码 admin admin 2.后台登陆为什么没有反应？答：iis环境配置，程序所在目录没有修改写入权限 3.上传图片上传不了？答：iis 环境示配置AspJpeg组件 4.访问时出现乱码或错误或空白.答：本系统采用UTF-8国际编码,不允许在netbox类似这些简易测试工具下运行，请在iis环境下运行本系统。 3.主要功能 Div+CSS+JS+AJAX 智能瀑布流展示图片，自适应屏幕宽度 多功能无限级分类 支持10M以上的大图片上传，自动生成缩略图，加快显示速度 批量上传图片，一键上传文件夹内所有选择的图片 图片自动按年月生成文件夹保存，让图片管理更有条理 缩略图后台可以设置尺寸，系统智能识别，生成小图，中图，原始图 原始图片保存路径智能加密 支持原始图片下载功能 图片可以添加图片详细说明，后台带有编辑器编辑 图片水印功能，图片上传时可以生成高清晰的图片水印，水印位置智能设置 文字水印功能，后台智能设置文字水印大小，字体，颜色，阴影等属性,水印位置智能设置 图片水印与文字水印可以同时使用，智能识别位置，不会重叠 图片评论功能，评论支持与反对功能，评论砌楼式回复功能 管理员后台回复留言评论功能 支持键盘访方向键查看上一张，下一张 支持设置会员，后台添加会员帐号，只允许会员访问图片系统 三种管理员状态 A.超级管理员，B.图片发布员,C.审核员 超级管理员 拥有后台所有权限 发布员只能发布图片 审核员登陆后，只能审核图片显示状态 支持数据库备份与恢复 支持访问ip封锁管理 ， 可设置 只允许指定ip段的用户访问，或者禁止指定ip段的用户访问
嵩嵩图片管理系统源码 v8.0
04-02
这是一款非常不错的嵩嵩图片管理系统，该系统功能很强大，而且源码也很简单，界面设计也是可以的，也容易上手，很适合一下图片管理的朋友使用，并且该系统已经有几个版本的发布了，算是比较有经验的图片管理系统。 1.安装环境 嵩嵩图片管理系统v8.0 UTF-8 安装时不需要作任何修改即可正常运行 智能识别目录，可以放在任意目录下访问 请在iis环境下使用本系统。 需要AspJpeg水印组件支持 2.常见问题 1.后台路径 admin/ 帐号密码 admin admin 2.后台登陆为什么没有反应？答：iis环境配置，程序所在目录没有修改写入权限 3.上传图片上传不了？答：iis 环境示配置AspJpeg组件 4.访问时出现乱码或错误或空白.答：本系统采用UTF-8国际编码,不允许在netbox类似这些简易测试工具下运行，请在iis环境下运行本系统。 3.主要功能 Div+CSS+JS+AJAX 智能瀑布流展示图片，自适应屏幕宽度 多功能无限级分类 支持10M以上的大图片上传，自动生成缩略图，加快显示速度 批量上传图片，一键上传文件夹内所有选择的图片 图片自动按年月生成文件夹保存，让图片管理更有条理 缩略图后台可以设置尺寸，系统智能识别，生成小图，中图，原始图 原始图片保存路径智能加密 支持原始图片下载功能 图片可以添加图片详细说明，后台带有编辑器编辑 图片水印功能，图片上传时可以生成高清晰的图片水印，水印位置智能设置 文字水印功能，后台智能设置文字水印大小，字体，颜色，阴影等属性,水印位置智能设置 图片水印与文字水印可以同时使用，智能识别位置，不会重叠 图片评论功能，评论支持与反对功能，评论砌楼式回复功能 管理员后台回复留言评论功能 支持键盘访方向键查看上一张，下一张 支持设置会员，后台添加会员帐号，只允许会员访问图片系统 三种管理员状态 A.超级管理员，B.图片发布员,C.审核员 超级管理员 拥有后台所有权限 发布员只能发布图片 审核员登陆后，只能审核图片显示状态 支持数据库备份与恢复 支持访问ip封锁管理 ， 可设置 只允许指定ip段的用户访问，或者禁止指定ip段的用户访问 Q
嵩嵩图片(相册)管理系统 v8.0.rar
08-29
《嵩嵩图片管理系统》简称"SsPic"，采用ASP ACCESS DIV CSS AJAX开发,可配置在支持ASP环境的任意**。 1.安装环境 嵩嵩图片管理系统v8.0 UTF-8 安装时不需要作任何修改即可正常运行 智能识别目录，可以放在任意目录下访问 请在iis环境下使用本系统。 需要AspJpeg水印组件支持 2.常见问题 1.后台路径 admin/ 帐号密码 admin admin 2.后台登陆为什么没有反应？答：iis环境配置，程序所在目录没有修改写入权限 3.上传图片上传不了？答：iis 环境示配置AspJpeg组件 4.访问时出现乱码或错误或空白.答：本系统采用UTF-8国际编码,不允许在netbox类似这些简易测试工具下运行，请在iis环境下运行本系统。 3.主要功能 Div CSS JS AJAX 智能瀑布流展示图片，自适应屏幕宽度 多功能无限级分类 支持10M以上的大图片上传，自动生成缩略图，加快显示速度 批量上传图片，一键上传文件夹内所有选择的图片 图片自动按年月生成文件夹保存，让图片管理更有条理 缩略图后台可以设置尺寸，系统智能识别，生成小图，中图，原始图 原始图片保存路径智能加密 支持原始图片下载功能 图片可以添加图片详细说明，后台带有编辑器编辑 图片水印功能，图片上传时可以生成高清晰的图片水印，水印位置智能设置 文字水印功能，后台智能设置文字水印大小，字体，颜色，阴影等属性,水印位置智能设置 图片水印与文字水印可以同时使用，智能识别位置，不会重叠 图片评论功能，评论支持与反对功能，评论砌楼式回复功能 管理员后台回复留言评论功能 支持键盘访方向键查看上一张，下一张 支持设置会员，后台添加会员帐号，只允许会员访问图片系统 三种管理员状态 A.超级管理员，B.图片发布员,C.审核员 超级管理员 拥有后台所有权限 发布员只能发布图片 审核员登陆后，只能审核图片显示状态 支持数据库备份与恢复 支持访问ip封锁管理 ， 可设置 只允许指定ip段的用户访问，或者禁止指定ip段的用户访问
box-shadow
qq_35679291的博客
08-29 231
box-shadow:水平偏移量 垂直偏移量 模糊半径 扩展半径 颜色 inset内部阴影; X轴:正值往右,负值往左(必须) Y轴:正值往下,负值往上(必须) 模糊半径:圆心牧户半径,值越大,越模糊; 扩展半径:从阴影的中心点开始扩展; 颜色:阴影部分的颜色(必须); inset:内部阴影,盒子以外的都是内部阴影; 默认就是外部阴影:躲在盒子后面,盒子多大它多大.<div></di
用html实现7种自动颜色变换,使用CSS3 box-shadow实现的7个按钮悬停动画特效
weixin_33784667的博客
06-03 354
CSS语言：CSSSCSS确定/*https://developer.mozilla.org/en/docs/Web/CSS/box-shadowbox-shadow: [inset?] [top] [left] [blur] [size] [color];Tips:- We're setting all the blurs to 0 since we want a solid fill.- Ad...
[WEB前端]图片加阴影效果
Cedric_6的博客
03-13 1370
图片加阴影效果 有时候想要在图片上面添加字，有时候图片太亮所以字不明显或者不美观，因此想要在图片上加阴影效果。 不加阴影 background:url(‘图片的相对路径’) <body> <div style="background:url('image/csdn.jpg');text-align:center;width:500px;height:500px;backgro...
57道CSS常问面试题及答案汇总
web前端开发
08-05 1524
1、介绍一下标准的css的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin低版本IE盒子...
不规则图片加阴影
weixin_44416019的博客
09-09 947
今天分享一个 CSS 小技巧： 假如需要给一个不规则图片加阴影的话，直接使用 box-shadow 通常是行不通的。 这时候我们可以使用 filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)) 以下图片的状态分别为：filter、box-shadow、原图。大家可以看到通过 drop-shadow 可以完美的给不规则图片加上阴影 ...
CSS 之 自适应按钮
zhoushuizhang的博客
11-11 3533
前言 为了减少重复造轮子，打算记录一些CSS样式的小技巧，后期会继续更新…… 目标 实现自适应按钮，即：按钮可以根据父级字体大小来调整自身的大小。 当需要修改按钮颜色时可以直接利用css层叠覆盖实现，使得代码更易于维护。 代码 <!DOCTYPE html> <html> <head> <met...
前端样式之div自适应，图片和盒阴影设置
weixin_41897122的博客
03-08 803
这篇就是对用的比较细小的css样式的总结和合并,常用又易忘的 作为背景,可以设置不重复布局,缩小比例50%,如果位置不满意可以用background-position调节位置,注意原点位置为图片的左上角,x轴向右为正值,y轴向下为正值 background: url(/static/image/test.png) 0 0 no-repeat; background-size: 50...
鼠标悬停后，块四周出现阴影的效果
Amouzy的博客
09-09 3381
这个效果其实很简单，只需要给元素添加一个:hover伪类，并给它加上css3的box-shadow属性，向外建立投影便能实现视觉上的悬空。 话不多说，上干货： html: <div class="hh">小夭给你展示怎么出现阴影</div> css: .hh{ width: 300px;height: 100px; margin:30px;background: wheat;} .hh:hover{box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2
uniapp nvue map中刚踩到的坑 解决markers和polyline不显示
热门推荐
うさぎの喫茶店
04-14 1万+
uniapp真是个神奇的框架，文档上明明写着marker，polyline中的部分属性在nvue中支持，结果，别说marker的属性了，marker都没了 解决 还是来看看怎么解决的 这是开始时不能显示marker的代码 <map class="my-map" id="my-map" :style="{ height: mapHeight }" :latitude="latitude...
uniapp申请高德地图Key SHA1和PackageName
うさぎの喫茶店
03-31 7355
项目中需要使用地图，没想到申请还这么麻烦 注册开发者账号 首先在高德开放平台注册开发者账号 不多解释 创建应用 先进入控制台 填写应用名称和类型就好 创建key 创建应用后点击 key名称按照[应用名 + 应用场景]的格式填写 比如：悠游-小程序 小程序不用设置啥这里就不多说 创建Androidkey 看起来很正常，谁能想到SHA1和PackageName在uniapp项目中这么难找呢 ...
uniapp使用高德地图
うさぎの喫茶店
04-12 6161
uni中使用地图还是挺麻烦的，文档还要借鉴人家小程序的文档 先做最基本的地图 首先在高德地图的控制台里下载小程序的SDK（不管你是不是开发小程序，都是这个） 点这里直接下载 然后把压缩包里的amap-wx.js放到工程的common目录下 不添加这个的话没法用高德地图提供的一些方法 制作地图页的时候建议使用nvue页面，即使原来的页面都是vue也没关系，因为map的好多属性和方法不支持vue页面 ...
uniapp使用高德地图线路规划
うさぎの喫茶店
04-16 5866
地图终于实现了想要的功能 准备 高德地图提供了线路规划的接口，但是由于uniapp使用的是小程序的SDK，有些东西就会无法使用 参考文档 SDK里面的东西都是小程序中的语法，比如wx.getLocation这样一来在uniapp中就会报错 为了解决这个问题，我把他的amap-wx.js改成了amap-uni.js 我已经放到了我的资源和百度云里,百度云提取码 mtm5 const key = '...
uniapp连接本地服务器请求超时
うさぎの喫茶店
04-27 3730
刚拿到后端准备去接，结果发现本地请求还都超时了 看网上有说请求时加上sslVerify:false 但是我加上也没有任何变化，该超时还是超时 终于找到原因 我用的是Android studio的模拟器，需要把本地的127.0.0.1改成10.0.2.2 改完就可以用了 但是很快又有了新问题 真机调试不能用了 这里其实可以访问网络位置 先在cmd中输入 ipconfig 然后会返回一大...
3、 图片居中.图2 4、 页面宽高自适应。所有元素随着页面窗口变大变小而变。图3 5、 文字居中 6、 颜色设置 7、 内外边距的设置 8、 图片阴影 9、 JQ引用
06-08
1. 图片居中 要让图片居中，可以将其放在一个包含块元素中，并设置该元素的text-align属性为center。示例代码如下： ```html <div style="text-align: center;"> <img src="your-image-url.jpg" alt="your-image"> </div> ``` 2. 页面宽高自适应 为了实现页面宽高自适应，可以使用CSS中的百分比单位。具体方法是将HTML和body元素的宽高设置为100%，然后将其他元素的宽高也设置为百分比。示例代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自适应页面示例</title> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .container { width: 80%; height: 80%; margin: auto; background-color: #f0f0f0; } </style> </head> <body> <div class="container"> <p>这是一个自适应页面示例</p> </div> </body> </html> ``` 3. 文字居中 要让文字居中，可以使用text-align属性将其水平居中，使用line-height属性将其垂直居中。示例代码如下： ```html <p style="text-align: center; line-height: 100px;">这是一段居中的文字</p> ``` 4. 颜色设置 要设置颜色，可以使用CSS中的color属性。该属性可以接受多种颜色值，如十六进制、RGB、颜色名称等。示例代码如下： ```html <p style="color: red;">这是一段红色的文字</p> ``` 5. 内外边距的设置 要设置内外边距，可以使用CSS中的padding和margin属性。这两个属性都可以接受多个值，分别表示四个方向的边距。示例代码如下： ```html <div style="padding: 10px 20px; margin: 20px 40px;">这是一个有边距的元素</div> ``` 6. 图片阴影 要给图片添加阴影效果，可以使用CSS中的box-shadow属性。该属性可以接受多个值，包括阴影的水平偏移量、垂直偏移量、模糊半径、扩散半径和颜色。示例代码如下： ```html <img src="your-image-url.jpg" alt="your-image" style="box-shadow: 2px 2px 5px #888;"> ``` 7. JQ引用 要引用jQuery库，可以在HTML文档的head标签中添加以下代码： ```html <head> <meta charset="UTF-8"> <title>示例页面</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> ``` 这样就可以在页面中使用jQuery库提供的功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值