java设置图片点击渐变透明,图片实现渐变/透明效果_weixin_39569753的博客-程序员宅基地

技术标签: java设置图片点击渐变透明  

众所周知,图片等一些盒子都可以利用opacity属性来设置不透明度,但是前两天我朋友忽然给我一个截图,截图效果如下

4c80e9ac1e3424d4177a1d543a0b420e.png

图中红框圈住的位置图片或者说摄像头采集的画面出现了渐变到透明,可以清楚的看到可以看到后面小哥的胳膊,然后问我如何实现这种效果,这下把我难住了(呵 天天给我出难题),我开始在个大论坛开始寻找解决方案;

忽然在前天,日常逛论坛时看到一个文字投影的效果,而后忽然灵机一动就想,能不能变相的实现前两天我想要的那种效果,于是乎赶紧打开编辑器试了下,发现确实可以把我想要的图片或者盒子进行投影并给投影设置上渐变颜色及透明,结果出来了,只不过出来的效果他反了

ba992ff34c17a851a4e220c6e9786551.png

随后利用transform: rotate(180deg);控制他使出倒挂金钩此等功夫,果然不负所望,成功翻转过来

db0f01571697e87abe986a64b8f35705.png

但是我想要的只有投影,因为我想要效果目前只能用投影去实现去控制,但是他却本体与投影共同出现了,我不想看到本体,太丑了,怎么办呢,那就给他装个position: absolute; top给他爸爸装个position: relative; overflow: hidden;让他滚出~,结果显而易见,我胜利了;

c6c8487aa038d3e0e04e6b72fb16a9b4.png

我得到了我想要的结果,为了验证结果,我用文字放在他的下方 看看是否透明;

25c9af6e57806c2c50d4994b3126a15d.png

我真的成功了,哈哈(小开心一会儿),为了再次确认他真是的图片实现了渐变透明,我把渐变的透明度改成了1(也就是不透明)

8c76a769d2e4eb051b8b7be29ca4d373.png

事实证明,我真的成功了!!!

吹完牛皮,赶紧附上完成代码:

css:

a25a01a563b2123a70bd665861ec40cc.png

html:

cd10a1b5365605e3d3f505c0fc03d559.png

最终效果图:

25c9af6e57806c2c50d4994b3126a15d.png

呃…其实核心就是利用投影来完成的-webkit-box-reflect: below 0 linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 1) 100%);

https://www.w3cschool.cn/css3/box-reflect.html

当然 肯定有大佬在我之前发现这种实现方式,不过当时我找了很久都没找到实现方式的写法,想了想 就发出来吧,如果有什么不对的地方,或者有其他方式也可以实现同等效果的话 还劳请告知,在下多谢各位大佬了!!!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39569753/article/details/115807879

智能推荐

第二十三章 : 打印_砖业洋__的博客-程序员宅基地

打印After spending the last couple of chapters manipulating text, it’s time to put that text on paper. In this chapter, we’ll look at the command-line tools that are used to print files and control prin...

Feign简介与简单应用_chengqiuming的博客-程序员宅基地_feign

一 点睛Feign是Netflix开发的声明式、模板化的HTTP客户端, Feign可以帮助我们更快捷、优雅地调用HTTP API。在Spring Cloud中,使用Feign非常简单——创建一个接口,并在接口上添加一些注解,代码就完成了。Feign支持多种注解,例如Feign自带的注解或者JAX-RS注解等。Spring Cloud对Feign进行了增强,使Feign支持了Sprin...

ArcGIS布局视图(Layout)大小设置_fantasy云桓的博客-程序员宅基地_arcgis更改布局视图框大小

要在文件里面选择页面和打印设置,选择自定义,然后设置宽度和高度

Android系统移植与调试之------->MTK 标准编译命令_字节卷动的博客-程序员宅基地

命令格式:./maketek [option] [project] [action] [modules]Option:   -t ,-tee :输出log信息到当前终端   -o , -opt=…… : 编译附加条件,一般使用-opt=TARGET_BUILD_VARIANT=user来编译用户板软件   -h ,help : 打印帮助信息并退出

影响项目的因素及经验总结,建议收藏_公众号:ITIL之家的博客-程序员宅基地

我们都要学会从项目失败中吸取教训,只要我们能够能有宽大的胸怀去面对它,那么犯错也不见是一件坏事。其实影响我们项目失败的因素主要分为:技术失败:1、领先技术的诱惑2、不完善的技术设计3、为非...

随便推点

剑指Offer——8.二叉树的下一个节点_BlackMaBa的博客-程序员宅基地

题目:给定一颗二叉树和其中一个节点,如何找出中序遍历序列的下一个节点?树中的节点除了有两个分别指向左、右子节点的指针,还有一个指向父节点的指针。二叉树节点定义如下: class BinaryTreeNode { int data; BinaryTreeNode left; BinaryTreeNode right; B...

springboot--支付宝条码支付的实现_Edwina414的博客-程序员宅基地

这几天一直在调支付宝的条码支付的接口,遇到不少问题,想跟大家分享一下。我还是建议大家在官网下载的接口先调通了,再放入自己的项目中。我的小伙伴做的是微信条码支付,不得不说,支付宝的接口文档比微信的详细多了,此外支付宝还附带一个样例demo,非常便于新手开发与学习       所谓的条码支付,就是商家扫用户的付款二维码进行结账,用户只需展示付款二维码即可。而扫码支付是用户扫商家的二维码,然后输入金

深入解读微服务架构下分布式事务解决方案_蔚1的博客-程序员宅基地

微服务倡导将复杂的单体应用拆分为若干个功能简单、松耦合的服务,这样可以降低开发难度、增强扩展性、便于敏捷开发。概念一经提出迅速火遍全球。当前 Hailo 有160个不同服务构成,NetFlix 有大约600个服务。国内方面,阿里巴巴、腾讯、360、京东、58同城等很多互联网公司都进行了微服务化实践。分布式事务问题被著名架构师 Chris Richardson 称为微服务的三大难题之一,而且当前 D...

php级联删除怎么做,MSSQL_SQL 级联删除与级联更新的方法,复制代码 代码如下:on delete casc - phpStudy..._weixin_39876450的博客-程序员宅基地

on delete cascade当你更新或删除主键表时,那么外键表也会跟随一起更新或删除,需要在建表时设置级联属性CREATE TABLE Countries(CountryId INT PRIMARY KEY)INSERT INTO Countries (CountryId) VALUES (1)INSERT INTO Countries (CountryId) VALUES (2)INSER...

React-redux基础_weixin_33843947的博客-程序员宅基地

前言在学习了React之后, 紧跟着而来的就是Redux了~ 在系统性的学习一个东西的时候, 了解其背景、设计以及解决了什么问题都是非常必要的。接下来记录的是, 我个人在学习Redux时的一些杂七杂八~Redux是什么通俗理解https://www.zhihu.com/questio...介绍先从官方的一句介绍看起:Re...

使用Labellerr轻松进行6个步骤的图像分类标签_weixin_26729375的博客-程序员宅基地

Have you ever wondered how Instagram takes care of the abusive and inappropriate images shared by some of its users? How Google Photos image tagging works? Or how companies like Twitter, Facebook, Pin...