位置: IT常识 - 正文

教你如何用CSS修改图片颜色(css样式修改)

编辑:rootadmin
教你如何用CSS修改图片颜色

推荐整理分享教你如何用CSS修改图片颜色(css样式修改),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:教你如何用css修改文字,css怎么修改字体,使用css样式修饰网页,css怎么修改字体,css怎么修改字体,css样式修改,教你如何用css修改文字,css修改,内容如对您有帮助,希望把文章链接给更多的朋友!

看到题目是不是吓了一跳?css竟然还有这个操作?还真是第一次听说~

原理嘛,其实很简单的,用到的就是 CSS3 滤镜filter中的drop-shadow,该滤镜可以给图片非透明区域添加投影。你可以理解为下图

它实现的效果看上去就像使原来的对象离开页面,然后在页面上显示出该对象的投影。是有一点类似box-shadow,但是二者还是有显著差别的,我后面会写一篇专门的文章来比较二者的差别。

先来看一下语法:

filter:drop-shadow(水平阴影偏移距离 垂直阴影偏移距离 投射的阴影颜色 );

我们准备一张背景色是透明的图片(图片尺寸40px X 40px),

用一个div将该图片包裹住,给图片添加

filter: drop-shadow(40px 40px yellow)

这段代码,代表投射出一个和该图片一样的形状,

三个参数分别代表:

水平向右移动40px,

垂直向下移动40px,

投射出的形状颜色为黄色。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

.box{

width: 40px;

height: 40px;

border: 1px solid red;

margin: 200px auto;

}

.pic{

filter: drop-shadow(40px 40px yellow);

}

</style>

</head>

教你如何用CSS修改图片颜色(css样式修改)

<body>

<div class="box">

<img src="img/delete.png" class="pic"/>

</div>

</body>

</html>

效果为

接下来我们稍微更改一下原代码,将原图设置在div外部并隐藏,变色后的投影放置在div中

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

.box{

width: 40px;

height: 40px;

border: 1px solid red;

margin: 200px auto;

text-indent: -40px;

overflow: hidden;

}

.pic{

filter: drop-shadow(40px 0px yellow);

}

</style>

</head>

<body>

<div class="box">

<img src="img/delete.png" class="pic"/>

</div>

</body>

</html>

如果想换成其他颜色,直接更改第三个参数就Ok了~是不是很简单

本文链接地址:https://www.jiuchutong.com/zhishi/298842.html 转载请保留说明!

上一篇:XGBOOST算法Python实现(保姆级)(XGboost算法预测股价模型)

下一篇:滑模控制理论(SMC)(滑模控制理论与应用研究pdf)

  • 小规模纳税人企业所得税多少
  • 企业发生的哪些成本可以在企业所得税税前扣除
  • 资产负债表是根据什么填的
  • 固定资产清理费用计入哪里
  • 企业净利率多少算正常
  • 公司向公司借款可以无息吗
  • 员工餐补是放入福利费吗?
  • 形式发票需要签字盖章吗
  • 印花税申报了什么时候扣款
  • 生产工人的费用属于什么会计科目
  • 公司购买车辆抵扣税
  • 员工报销医疗费怎么做账
  • 原油资源税计税方法
  • 劳动合同解除和终止的经济补偿
  • 企业缴纳的社保怎么查询
  • 装卸搬运费是否含税
  • 防伪税控发票种类主要有哪些
  • 个体工商户如何给员工交社保
  • 企业弥补亏损的三个途径
  • 水土保持补偿费收费标准
  • 固定资产分期抵扣怎么申报增值税?
  • 在建工程转入固定资产的条件
  • 公司员工补充医疗保险方案
  • 销售使用过的板房如何缴税?
  • uefi模式怎么装机
  • 其他业务成本属于成本类吗
  • VMware虚拟机中怎么复制粘贴
  • 项目设计费怎么计算
  • 笔记本win10玩红警怎么全屏
  • 计提税金会计分录怎么做
  • 现金解款单的使用范围
  • 认缴出资什么时候补齐
  • vue怎么使用本地存储比较好
  • win11系统未激活
  • php odbc
  • windows7安装nodejs14
  • 票据贴现业务如何核算
  • 酒水入库的会计分录怎么做
  • 取得土地使用权的方式
  • vue组件继承element并重写方法
  • 税控盘的发票怎么做账
  • numpy的简单例子
  • thinkphp如何做微服务
  • discuz论坛安装步骤
  • 汽车租赁业务是否属于租赁服务
  • 应收账款属于哪个会计要素
  • 免税农产品的范围有哪些
  • 个人发票抬头是自己的名字吗
  • tempdb数据库能删么
  • 一般纳税人增值税税率
  • 递延收益的影响
  • 装修工程一般质保几年
  • 超市的库存商品是怎么记账的
  • 资产负债表编制
  • 公司与公司的往来款计入什么科目
  • 申报无票收入后期开票要冲回要备案吗
  • 固定资产清理是资产类的备抵科目吗
  • 纳税人发生应税行为
  • 银行预留印鉴是啥
  • 已抵扣的进项税额转出会计分录账务处理
  • 商家代金券谁出钱
  • 自产货物用于在建工程账务处理
  • 暂估成本以后也没有票回来了
  • 合资公司股东如何退股
  • 胶水属于什么开发工具
  • 金税盘系统可以添加2个账号?
  • 苹果mac没有声音怎么办
  • xp主题设置
  • linux 删除文件夹里的所有文件
  • SonicStageMonitoring.exe是什么进程 有什么作用
  • win10打开小娜
  • windows10周年更新
  • perl中哈希如何赋值
  • jquery 定位
  • 关于javascript中数组的说法不正确
  • 安卓listview添加数据
  • 酒精是否缴纳消费税
  • 北京市税务局的待遇怎么样
  • 餐饮发票真伪查询系统
  • 生育登记网上服务大厅山东
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设