-webkit-cross-fade

最新推荐文章于 2024-04-20 12:11:35 发布
最新推荐文章于 2024-04-20 12:11:35 发布
阅读量238 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： web mobile开发资料 webkit私有属性集合 文章标签： -webkit-cross-fade
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_2245/article/details/82479719
本文深入解析CSS3的交叉淡入淡出功能，通过实例演示如何使用background-image属性实现两张图片的交叉淡入淡出效果，并提供官方草案链接及扩展阅读资源。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言：

 

     本文做个人学习积累用！

 

正文：

 

     -webkit-cross-fade

 

  • 支持图片交叉淡入淡出
background-image:-webkit-cross-fade(url(**.png),url(**.png),50%);

 

     

 

 

    注释：

 

     percentage 类似是作用在第二张图片的透明度：

 

  1. 如果是0，显示的是第一个image
  2. 如果是1，显示的是第二个image

 

   扩展阅读：

 

   http://www.zhangxinxu.com/wordpress/2012/09/css3-background-image-cross-fade/

巧用CSS cross-fade()实现背景图像半透明效果
关注我！带你一路 "狂飙" 到底！
12-16 640
函数获取图像列表，并以百分比的形式定义当每个图像与其他图像混合时保留的不透明度。百分比值必须编码为不带引号，并且必须包含“％”符号，并且其值必须在0％和100％之间。将百分比视为每个图像的不透明度值，这意味着值为0％表示图像完全透明，而值为100％则使图像完全不透明。前段时间有挺火的一个小游戏，拿两张图片叠加在一起，看看复合人物的效果，用css怎么实现呢？可能大部分人想到的是将两个img用定位的方式叠加在一起，分别设置透明度，当然这个办法是可行的，其实css还提供了一个。函数可以让两张图像半透明混合。
CSS实现图像半透明叠加的cross-fade()函数
读心悦
08-31 809
CSS 的函数是 CSS 图像函数之一， 类型属性，比如或。这个函数接受两个图像作为参数，并通过一个可选的百分比值来指定两个图像之间的过渡程度（如果不提供百分比，默认为 50%）。
css3背景图片透明叠加属性cross-fade简介及用法实例
12-12
据说iOS6系统(iPhone5)增加了两个CSS3属性，一个是CSS3 filters – CSS3滤镜，在“CSS将图片转换成黑白”一文中就介绍过CSS3 grayscale滤镜；另外一个是CSS3 Cross-fade – CSS3交叉淡入淡出。 毕竟有IE滤镜这厮，所以前者看上去可能不那么显生；那后者Cross-fade是？ 用法实例用法如下： 复制代码代码如下:background-image: -webkit-cross-fade(url(1.jpg), url(2.jpg), 50%); 官方草案表达式为： 复制代码代码如下:<image> = cross
如何讲清楚async和await？_,ajaxa,azqa,(1)，2024年最新细节决定成败
2401_83974020的博客
04-20 1018
当我学到一定基础，有自己的理解能力的时候，会去阅读一些前辈整理的书籍或者手写的笔记资料，这些笔记详细记载了他们对一些技术点的理解，这些理解是比较独到，可以学到不一样的思路。网安所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。观看零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。//那么这里就是在等待ajaxA请求的完成。//wait这个单词是等待的意思。
cross-fade图像透明度混合的记录
QUX轻博客
08-07 277
1.官方定义 —— https://developer.mozilla.org/en-US/docs/Web/CSS/cross-fade CSS cross-...
html背景图片半透明遮罩,巧用CSS cross-fade()实现背景图像半透明效果
weixin_39757040的博客
05-31 1737
一、需求描述某元素，希望background-image背景图片是半透明的，但是，元素里面的其他内容，例如文字，图标之类的还是不透明。如果是纯色背景或者是CSS渐变背景，很好处理，使用rgba或者hsla颜色色值即可。但是，如果是url()背景图像，似乎就无能为力了。如果是个内联的图像那很好处理，无论是filter滤镜、mask遮罩还是opacity透明度设置都可以实现我们的效果，但是偏偏这里是背...
CSS【详解】遮罩
热门推荐
朝阳39的博客
11-05 1万+
CSS遮罩的语法 功能：让一个元素按照某张图像的轮廓显示 兼容性：需使用-webkit-私有前缀 mask-image 遮罩图片 支持多图片，所有<image>数据类型的值都可以作为遮罩图像 半透明的PNG图像遮罩 效果见 https://demo.cssworld.cn/new/12/1-1.php <img src="nature-8.jpg" class="mask-image" width="256" height="192"> .mask-image { .
Javascript仿flash焦点图片效果
阳光小筑
08-12 680
.d1{width:443px;height:auto;overflow:hidden;border:#666666 2px solid;background-color:#000000;position:relative;} .loading{width:443px;border:#666666 2px solid;background-color:#000000;color:#FFCC00;f
CSS整理半透明边框
程序猿开发日志【学习永无止境】
04-14 3021
1.半透明边框 问题: 如果我们要为一个容器设置红色背景和一道黑色半透明边框，我们可能会这样写:border: 20px solid rgba(0,0,0,0.5); background: red; 但是效果却是这样的（图1-1.png）；我们的半透明颜色怎么没有实现半透明边框？ 图1-1.png 解决方案： 我们可以通过background-
FengFocus 焦点图插件（昨天写了博客，今天封装了）
FungLeo's Blog
09-04 1900
FengFocus 使用说明 FengFocus Demo 查看 FengFocus Demo 为什么要写 FengFocus ？ 自从开始学习 jQuery 我就深深的被它给吸引了。虽然年岁有点大了。但是止不住想要学习的冲动。 根据我个人的学习经验，我认为实战是唯一提升自己的途径。所以我自己写了一些 jQuery 插件。 去年自己写的第一个焦点图插件，命名为 FengFocus 1.
jQuery动画效果之-fadeTo
Focus-Fe
07-23 197
  这部分暂时不挖源码----简单介绍一下api的使用   fadeTo(speed,opacity,[callback])   ---------把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。              只是调整不透明度，元素的高和宽不变。     参数说明：       speed {String |...
一个测试同一页面不同分辨率下的效果的工具
Focus-Fe
01-30 2523
工具地址：http://www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/   工具功能：可以做出书签，在某一个页面使用，输出不同分辨率下的显示效果 ...
关于navigator.connection
Focus-Fe
04-07 1480
       navigator.connection：   UNKNOWN        0 ETHERNET       1 WIFI                   2 CELL_2G          3 CELL_3G          4
iOS如何禁用长按页面弹出菜单
Focus-Fe
02-01 1261
iOS如何禁止用户长按页面导致弹出菜单？       给元素设置样式：   -webkit-touch-callout:none;      补充：同样适用于图片如果想禁止用户保存或者复制等 ...
如何关闭iOS键盘首字母输入自动大写
Focus-Fe
12-28 1139
问题：        在iOS中，虚拟键盘弹出时候，默认开启首字母大写，如何关闭？     方案：        移动webkit版本的input有一个属性：autocapitalize.        设置off来关闭   ...
iOS禁止用户选中文字
Focus-Fe
02-23 834
iOS如何禁止用户选中文字？       给文字增加样式：   -webkit-user-select:none;  
修改el-fade-in-linear时间
最新发布
01-21
### 修改 Element UI 中 `el-fade-in-linear` 动画的持续时间 为了调整 Element UI 的 `el-fade-in-linear` 动画的时间，可以通过自定义 CSS 或者 SCSS 来覆盖默认样式。具体方法如下： #### 方法一：使用全局样式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值