css 背景渐变 图像_交叉渐变背景图像
css 背景渐变 图像
I’ve been working on a method to fade a page background image sequence, like the current Twitter login page. Usually, these effects are “faked” using a background and cover layer, but I was interested in manipulating true background images with blend modes.
我一直在研究一种淡化页面背景图像序列的方法，例如当前的Twitter登录页面。 通常，这些效果是使用背景和覆盖层“伪造”的，但是我对使用混合模式操纵真实的背景图像很感兴趣。
Quite by accident, I found that Webkit-derived browsers, such as Chrome, Safari and Opera, will actually cross-fade images in the background, given the right combination of CSS. In the interests of that, I’ve presented the basic code here, with more detail to come in a future article. You can also see a fullscreen version and inspect the code at CodePen.
偶然地，我发现Webkit派生的浏览器(例如Chrome，Safari和Opera)实际上会在给定CSS正确组合的情况下在后台淡入淡出图像。 为此，我在这里介绍了基本代码，在以后的文章中将介绍更多细节。 您还可以在CodePen中查看全屏版本并检查代码 。
Technically you don’t need any HTML content to make this example work, as the background images are applied to the <html> root element. Surprisingly, you don’t even need the blend mode, as Webkit will transition the images without it: I’ve left the property in place for the next article, which will use the feature to a greater extent.
从技术上讲，您无需任何 HTML内容即可使此示例正常工作，因为背景图片已应用于<html>根元素。 令人惊讶的是，您甚至不需要混合模式，因为Webkit会在没有它的情况下转换图像：我将属性留在了下一篇文章中，该文章将在更大程度上使用该功能。
html {background-size: cover;background: url("lone-tree.jpg") no-repeat center center fixed;background-blend-mode: darken;transition: 3s;
}
html * { transition: none; }This sets up the basic background: note the transition, and the combination of universal and descendant selector and declaration, used to ensure that nothing inside the body will inherit the transition.
这就设置了基本的背景：请注意transition ，以及通用和后代选择器以及声明的组合，用于确保主体内部没有任何东西会继承该transition。
The animation is handled with a script placed at the bottom of the page. It starts with an array of the image filenames you want to use, together with an indication of where they are, relative to the page itself:
通过页面底部的脚本处理动画。 它以您要使用的图像文件名的数组开头，并指示它们相对于页面本身的位置：
var bgImageArray = ["lone-tree.jpg", "lonely.jpg", "carezza-lake.jpg", "batu-bolong-temple.jpg"],
base = "",
secs = 6;The empty value for the base variable in this example assumes that the images are right beside the page. secs is the amount of time in seconds each background should remain on the page: in production it’s value would usually be around 12 ~ 30.
在此示例中， 基本变量的空值假定图像就在页面旁边。 秒是每个背景应保留在页面上的时间(以秒为单位)：在生产中，其值通常在12到30之间。
Chrome does a very good job of caching the images before they are used, but other browsers do not, causing white flashes as each image is loaded and replaced. To get around that issue, we can preload the images:
Chrome可以很好地在使用图像之前对图像进行缓存，但是其他浏览器却不能，在加载和替换每个图像时会引起白色闪烁。 为了解决这个问题，我们可以预加载图像：
bgImageArray.forEach(function(img){new Image().src = base + img;
});Next, the function to show the images in the background:
接下来，在后台显示图像的功能：
function backgroundSequence() {
window.clearTimeout();var k = 0;for (var i = 0; i < bgImageArray.length; i++) {setTimeout(function(){
document.documentElement.style.background = "url(" + base + bgImageArray[k] + ") no-repeat center center fixed";
document.documentElement.style.backgroundSize ="cover";if ((k + 1) === bgImageArray.length) {setTimeout(function() {backgroundSequence() }, (secs * 1000))} else { k++; }}, (secs * 1000) * i) }
}
backgroundSequence();Note that this script replaces the embedded or linked style from the CSS with an inline style for the <html> element.
请注意，此脚本用<html>元素的内联样式替换了CSS中的嵌入或链接样式。
There are a few conditions and improvements to be aware of:
需要注意一些条件和改进：
each image should be the same aspect ratio for the cross-fade to work effectively; otherwise you’ll see a slight transitioned “stretch” as each image submits to
background-size: cover.每个图像应具有相同的纵横比，以使交叉渐变有效地起作用； 否则，当每张图像提交到
background-size: cover您会看到一个轻微的过渡“拉伸”。- Firefox and Internet Explorer do not yet cross-fade the background images, simply substituting one for the other.
Firefox和Internet Explorer尚未交叉淡化背景图像，只是将其中一个替换为另一个。 secsneeds to be higher than thetransitionvalue (an even multiple works well).secs必须高于transition值(甚至多个也可以)。- The script could use some optimisation and improvements, including a fade-to-black option: I’ll put it up on Github for contributions presently.
该脚本可以使用一些优化和改进，包括“淡入黑色”选项：目前，我将其放在Github上进行贡献。
翻译自: https://thenewcode.com/991/Cross-Fading-Background-Images
css 背景渐变 图像
css 背景渐变 图像_交叉渐变背景图像相关推荐
- opencv 创建图像_非艺术家的图像创建（OpenCV项目演练）
opencv 创建图像 This project stemmed from my predilection of the visual arts - as a computing student, I ...
- acdsee扫描没有图像_详解CT图像常见伪影成因及解决方法
CT 图像伪影 (artifact) 是指重建图像上与实际解剖结构不相符的密度异常变化.CT 图像比传统平扫X线更容易出现伪影,这是因为 CT 图像是由成千上万独立的原始测量数据重建而得,而计算机重建 ...
- 响应式图像_如何为响应图像使用HTML5“图片”，“ srcset”和“大小”
响应式图像 <picture>是HTML5元素,旨在为我们提供更多的功能和性能更好的响应图像功能. Picture标签不会加载单个图像并尝试调整其大小以适合所有可能的视口尺寸和布局,而是加 ...
- 风格化图像_【开源】图像风格化和目标检测
团队今年两项新成果的代码现已开源,欢迎试用. 1. 任意风格图像风格化(ACM Multimedia 2020) 图像风格化方法可学习图像的内容和风格的特征表示,然后根据这些特征表示生成风格化后的图像 ...
- python研究背景和意义_一研究背景和意义
一研究背景和意义 参考腾发量或参考作物腾发量是水文学的一个基础性概念. 它是 世界粮农组织于 1977 年首次完整定义的 「 1 」 系指高度均匀一致 (8-15cm) ,生长旺盛.无病虫害,完全覆盖 ...
- OpenCV读取图像_显示图像和保存图像
配置好 OpenCV 以后,包含以下两个头文件: #include "cv.h" #include "highgui.h" IplImage* image=cv ...
- 015day(css控制单词换行的属性，css设置中英文大小写的属性，背景渐变)
一.css控制单词换行的属性 1.word-break自己决定自动换行的处理方法 ①word-break:normal:使用浏览器默认的换行规则.(英文) ②word-break:keep-all:不 ...
- 使用CSS实现网格+渐变背景色的Web页面背景
使用CSS实现网格+渐变背景色的Web页面背景 CSDN:jcLee95 邮箱:291148484@163.com 相关文章推荐: Vue中使用纯CSS实现全屏网格加渐变色背景布局:https://b ...
- css3 渐变背景 圆形,CSS 教程（5）-Css3-1,边框,背景,渐变,
1.CSS3 边框 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop 在 CSS3 中 border-radius 属性被用于创建圆角 div { ...
最新文章
- should not buy processed foods on the street
- centos8 配置 dns_广电行业DNS、DHCP案例详解
- GRE Sub math 报名
- UESTC学位论文latex模板下载
- synchronized 修饰static方法
- springboot整合视图层之freemarker
- mac苹果ping不通网络
- Python GStreamer Tutorial
- 批处理定时执行任务_[Abaqus tips ] 分析任务的定时执行
- JS数组 团里添加新成员（向数组增加一个新元素）只需使用下一个未用的索引，任何时刻可以不断向数组增加新元素。myarray[5]=88;...
- 我的天！你竟然没有在SpringBoot中使用过异步请求和异步调用...
- 一台计算机安装了fortran语言,win10系统fortran怎么安装_win10系统fortran安装教程
- PdgCntEditor系列教程一：基础知识
- mysql 登录指定sock路径
- 电脑主板元件判断方法
- windows下安装禅道
- 泰康人寿付刚：IT规划 SOA是目标
- 锻造宝剑！如何用一款手机打造一个移动渗透工具箱？？
- 上网日志留存_日志留存系统
- 【安全】椭圆曲线加密算法(ECC)深入理解