本文带你了解CSS中的背景图片函数:url()、image()、image-set()、cross-fade()、element()。有一定的参考价值,有需要的朋友可以参考一下,希望能帮到大家。

背景颜色函数(实际背景的函数)

【推荐教程:CSS视频教程】

url()

url函数表示对资源的引用,可以传入链接和相对地址,例如

background-image: url('./背景图片函数.png'); background-image: url('https://s3.ax1x.com/2020/11/29/DcV9V1.png');

图像()

image的功能和url类似,但是和url不同,image提供了优雅降级的能力。例如

background-image: image('a.webP','a.png','a.jpg');

这段代码的意思是,如果浏览器支持webP格式的图片,将应用a . webP;如果没有,a.png将再次接受测试,直到它适应当前的浏览器。遗憾的是,该功能仍处于草案阶段。

背景颜色函数(实际背景的函数)

所以暂时不关心这个功能的其他功能。有兴趣的同学可以去MDN了解更多相关信息和最新进展。

图像集()

Image-set可以保证图片在不同分辨率设备上的适配,可以根据不同的设备类型显示不同的图片。请参见下面的示例。

background-image: -webkit-image-set(url(./bg1x.png) 1x , url(./bg2x.png) 2x);

这个例子意味着bg1x.png显示在一层屏幕上,而bg2x.png显示在两层屏幕上。兼容性方面,最新的主流浏览器已经支持。对于不受支持的设备,您可以在使用此功能之前使用background:url()来实现兼容性。

背景颜色函数(实际背景的函数)

交叉渐变()

交叉淡入淡出用于将透明度应用于两个叠加的背景图像。用法如下

background-image: -webkit-cross-fade(url('./bg1x.png'),url('./bg2x.png'),70%);

背景颜色函数(实际背景的函数)

前两个参数是图片的资源位置,后一个需要传入一个百分比来表示透明度,是相对于最后一张图片的。例如,当百分比为0%时,此时应该只显示第一张图片。

背景颜色函数(实际背景的函数)

当百分比为100%时,仅显示第二张图片。

背景颜色函数(实际背景的函数)

这个属性在firefox中完全不兼容,但在chrome和safari中兼容得多。

背景颜色函数(实际背景的函数)

元素()

元素功能可以使用网站上的一些元素作为图片,这适用于图片的属性,也适用于元素所应用到的对象。使用方法

element(id)

必须传入的是id。看下面这个例子,实现一个类似于用元素双向绑定的函数效果。

<p class="element-wrapper"> <span id="ele" contenteditable>hello world</span> </p> <p id="element-test"></p> //style .element-wrapper{ width: 200px; height: 200px; } #element-test { width: 200px; height: 200px; background: -moz-element(#ele); background-size: contain; background-repeat: no-repeat; }

翻译

背景颜色函数(实际背景的函数)

这个属性还可以实现更有趣的效果,更多有趣的效果可以在这里查看。可惜目前只有firefox支持这个属性。

背景颜色函数(实际背景的函数)

更多编程相关知识,请访问:编程视频!!

以上是看CSS中的那些背景图片函数!更多详情,请关注AdminJS.cn其他相关文章!

adminjs.cn是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中,您可以学习到最新的前端开发技术,了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例,让您可以快速掌握前端开发的核心技术和流程。 Adminjs.cn还提供一系列实用的工具和插件,帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化,可以帮助您节省时间和精力,提升开发效率。 在Adminjs.cn中,您可以找到您需要的一切前端开发资源,让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭,一起探索前端开发的无限可能!

声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你

原文地址:背景颜色函数(实际背景的函数)