CSS :mix-blend-mode、aspect-ratio

这篇具有很好参考价值的文章主要介绍了CSS :mix-blend-mode、aspect-ratio。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

mix-blend-mode

元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

mix-blend-mode: normal; // 正常

mix-blend-mode: multiply; // 正片叠底

mix-blend-mode: screen; // 滤色

mix-blend-mode: overlay; // 叠加

mix-blend-mode: darken; // 变暗

mix-blend-mode: lighten; // 变亮

mix-blend-mode: color-dodge; // 颜色减淡

mix-blend-mode: color-burn; // 颜色加深

mix-blend-mode: hard-light; // 强光

mix-blend-mode: soft-light; // 柔光

mix-blend-mode: difference; // 差值

mix-blend-mode: exclusion; // 排除

mix-blend-mode: hue; // 色相

mix-blend-mode: saturation; // 饱和度

mix-blend-mode: color; // 颜色

mix-blend-mode: luminosity; // 亮度

mix-blend-mode: initial;

mix-blend-mode: inherit;

mix-blend-mode: unset;
 

 PS: mix-blend-mode: multiply;    // 可以得到图片背景透明效果

aspect-ratio 

 保持长宽比文章来源地址https://www.toymoban.com/news/detail-666366.html

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

到了这里,关于CSS :mix-blend-mode、aspect-ratio的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Blend for Visual Studio 概述

    https://learn.microsoft.com/zh-cn/visualstudio/xaml-tools/creating-a-ui-by-using-blend-for-visual-studio?view=vs-2022 Blend for Visual Studio 可用于设计基于 XAML 的 Windows 和 Web 应用程序。 它提供了与 Visual studio 相同的基本 XAML 设计体验,并添加了可视化设计器,以用于高级任务,例如动画和行为。 有关

    2024年02月04日
    浏览(25)
  • unity - Blend Shape - 变形器 - 实践

    拾遗,备份 blend shape 基于: vertex number, vertex sn 相同,才能正常混合、播放 也就是 vertex buffer 的顶点数量一样,还有 triangles 的 index 要一致 这样 blend shape 才能逐个顶点计算 计算公式:使用一张大佬整理的图,大佬的文章:BlendShapes基础与拓展练习(面捕与物体变形) Shift

    2024年04月14日
    浏览(22)
  • Unity中Shader的混合模式Blend

    Unity中Shader的混合模式Blend 这里用PS里的混合作为例子 没选择混合效果前,显示的效果是这样 选择了混合效果后,显示的效果就是这样 之前代码中写的 Blend one one 第一个 one 代表源颜色 第二个 one 代表目标颜色 BlendOP默认是 + (Add) 混合因子 One:源或目标的完整值 Zero:0 S

    2024年04月15日
    浏览(18)
  • Unity Shader相关的ZTest,ZWrite,Blend

    画家算法: 以一个画布为背景,从远到近画一个画面,先画最远的背景,也就是天空 然后假如是雪山, 然后再画上树木,树木在雪山上 然后山下是若干个居民的房屋,以及若干条道路 其次房屋门前可能有树木又当道部分房屋 其中某片区域一定会进行若干次上色,这样在

    2024年02月03日
    浏览(34)
  • SpringBoot简单使用切面类(@aspect注解)

    简介 Spring Boot中的AOP(Aspect Oriented Programming, 面向切面编程)可以让我们实现一些与业务逻辑无关的功能,如日志、事务、安全等。 特点 把这些跨切面关注点抽取出来,实现解耦。 使用切面承载这些功能的实现,而不污染业务逻辑。 在定义好的切入点Join Point,执行这些功能,比如方

    2024年02月10日
    浏览(31)
  • 【Unity】Entities 1.0 学习(一):Aspect

            Unity在 2022年下半年(我印象是9月份左右)推出了 Entities 1.0 ,可以在 2022.2.0b8 以上的版本使用。当时我粗略地看了一下,但是没有深入学习。最近空闲时间稍多,就认真来学习一下 Entities 1.0有啥新的东西。         1.0 毕竟是大更新,改变的东西还是很多,所以应该

    2023年04月08日
    浏览(25)
  • MidJourney教程03--BLEND 两张图片合成一张图片

    MidJourney教程02--BLEND 两张图片合成一张图片 首先输入   然后会让你选择两张图片进行处理!  那么,现在我们把比卡丘,和路飞融合在一起啦!  接下来看出来效果会是怎么样子呢? 那么,我们就得到了一个路飞比卡丘! 其实还有很多种方法可以使用! 例如场景与产品的

    2024年02月15日
    浏览(35)
  • springboot~aop方法拦截Aspect和InvocationHandler的理解

    在 Spring 中, @Autowired 注解的使用在不同的上下文中会产生不同的效果,这取决于所在的组件或类是否由 Spring 管理。 @Aspect 注解的使用 : @Aspect 注解通常用于声明切面,而切面是 Spring 管理的组件。因此, @Autowired 注解可以直接用于切面类,以注入其他 Spring 托管的 bean。S

    2024年02月10日
    浏览(26)
  • 切面 基于Aspect注解自动切面, 省下注解判断逻辑 handler

    父文章 spring aop 切面配置_aop 切面设置.**_个人渣记录仅为自己搜索用的博客-CSDN博客 【Spring AOP】@Aspect结合案例详解(一): @Pointcut使用@annotation + 五种通知Advice注解(已附源码)_@pointcut @annotation_天罡gg的博客-CSDN博客 @Pointcut(value = \\\"@annotation(com.tiangang.aop.MethodLog)\\\") public void

    2024年02月15日
    浏览(23)
  • 9. Bus network aspects of high speed CAN

    AH1014  Systems Applications, Automotive Innovation Center The number of nodes, which can be connected to a bus, depends on the minimum load resistance a transceiver can drive. NXPs 3rd generation high speed CAN transceivers provide an output drive capability down to a minimum load of RL,min = 45Ohm for VCC 4,5 V (4,75V for the TJA1048). The overall busload

    2023年04月26日
    浏览(20)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包