大奖18dj18vip-大奖18dj18娱乐官网

【腾讯云】618云聚惠,百款云产品限量抢购,1核2G云服务器首年95元 http://cloud.tencent.com/act/cps/redirect?redirect=1059&cps_key=9f7b3aa0b9ee11c8648ef8bf9d4f15a9&from=console

大奖18dj18vip

查看: 15|回复: 0
打印 上一主题 下一主题

[资讯] CSS中的混合模式,制作高级特效的必备技巧

[复制链接]
  • TA的每日心情
    擦汗
    昨天 14:55
  • 签到天数: 635 天

    [LV.9]以坛为家II

    硕士生

    1万

    主题

    1万

    帖子

    3万

    积分

    Rank: 8Rank: 8

    UID
    15343
    威望
    -561
    贡献
    8107
    在线时间
    321 小时
    注册时间
    2015-10-12
    跳转到指定楼层
    楼主

    本文转载自微信公众号「大迁世界」,转载本文请联系大迁世界公众号。

    什么是混合?

    根据维基百科:

    数字图像编辑和计算机图形中的混合模式(或混合模式)用于确定两个图层如何相互混合。在大多数应用程序中,默认的混合模式只是通过用顶层的内容覆盖底层来隐藏底层。

    在CSS中,有两个属性负责混合。mix-blend-mode用于混合DOM元素,background-blend-mode用于组合多个CSS背景。

    一、进入mix-Blend-Mode

    1. 基础范例

    我们以一个基本的例子来看一下它是如何工作的。我的标题上方有一个圆圈。我要做的是将文本与圆混合。

    「HTML」


    • Blend Me

    「CSS」

    为文本元素添加了mix-blend-mode: overlay,从而将其与圆混合。

    事例源码:

    http://codepen.io/shadeed/pen/a9c6751c0b99d3dbb04fd9514433e09e?editors=0100

    2. 带文字的图片

    我认为这是一个广泛使用的混合模式。文字在上面,图片在下面。

    在标题中添加了以下内容:

    • .hero-title {
    •     color: #000;
    •     mix-blend-mode: overlay;
    • }

    不仅仅是改变混合模式。例如,我们可以通过创建动画来提高创意。

    在此示例中,我想探讨文本如何与树叶背景融合。由于图像中包含暗点和亮点,因此在使文本看起来像在每片叶子下移动一样,这将起到非常有用的作用。

    事例源码:

    http://codepen.io/shadeed/pen/ef8d675755fde8087d9439b5593e1956?editors=0100

    3. 带有SVG图形的文本

    个有趣的效果是在带有矢量和形状的背景上有一个标题。当形状的颜色不同时,它会变得更加有趣。

    我们能用这些斑点形状做什么?我使用MorphSVG插件改变每个博客形状的路径。这产生了一个有趣的结果。


    事例源码:

    http://codepen.io/shadeed/pen/daa6d51bfec15e3cbaef12e8387c97f3?editors=0010

    4. 混合真实元素

    吸引我眼球的效果是当元素有白色背景和黑色前景使用`mix-blend-mode: screen``。

    5. 放大镜类

    我使用了SVG,并对其应用了以下内容。注意使用屏幕时黑色区域如何变为透明。


    事例源码:

    http://codepen.io/shadeed/pen/4d309070bd3855c1b87a955ac2cec95e?editors=0100

    6. 视频封面

    对我来说,这是一个非常有用的用例。我经常需要添加播放图标以指示文章中有视频,因此我最终使用了从中心透明的SVG。

    这听起来似乎正确,但有一定局限性。如果要添加悬停效果以填充三角形怎么办?由于在SVG中减去了形状,因此这是不可能的。一种解决方法是在SVG后面放置一个圆圈,并在悬停时对其进行着色。

    对我来说,这还不够。我也想反过来,三角形必须是白色的,其余的是蓝色的。

    多亏了混合模式,我可以通过在悬停时控制嵌入式SVG快速实现改效果。

    • .article__play {
    •     mix-blend-mode: screen;
    • }
    • .article:hover .article__play {
    •     mix-blend-mode: normal;
    • }
    • .article:hover .article__play {
    •     .play__base {
    •       fill: #005FFF;
    •     }
    •      
    •     .play__icon {
    •       fill: #fff;
    •     }
    • }

    事例源码:

    http://codepen.io/shadeed/pen/e06735fd2d2fd707a37f2c4804379342?editors=0100

    7. 储值卡

    另一种情况是使用裁切图像并将其与其下方的背景融合,结果非常有趣。

    • img {
    •     position: absolute;
    •     right: -15px;
    •     top: 0;
    •     width: 110px;
    •     mix-blend-mode: screen;
    • }

    这个想法是把图片放在右边,左边有标题和描述。

    同样,通过为每张卡添加多个背景可以更好:


    事例源码:

    http://codepen.io/shadeed/pen/a30f4ac9af6c6ec87a30f63deb2fc2c5?editors=1000

    8. 从徽标背景中删除白色

    我在Photoshop的早期就知道这个技巧。有时,我需要一个品牌的标志,它是很难得到一个透明的PNG版本。使用混合模式,这很容易解决。

    我模拟了Facebook和Amazon徽标,并在每个徽标下添加了白色背景。

    img {     mix-blend-mode: multiply;     filter: contrast(2); }

    注意,我添加了filter: contrast(2)来增加徽标的对比度。应用混合效果使他们比原来的颜色深一点。

    问题已解决!当然,我不建议使用此功能。但是,如果我被迫这么做,我将使用它来节省时间,当原始徽标到达时,我可以替换它并消除混合效果。

    事例源码:

    http://codepen.io/shadeed/pen/c8d0b773adf24901319794bda90d6a4e?editors=0100

    9. Isolation

    isolation CSS属性定义该元素是否必须创建一个新的层叠上下文(stacking context)。

    该属性的主要作用是当和background-blend-mode属性一起使用时,可以只混合一个指定元素栈的背景:它允许使一组元素从它们后面的背景中独立出来,只混合这组元素的背景。

    「html」

    •   CSS is Awesome


    「css」

    • div {
    •   isolation: isolate; /* Creates a new stacking context */
    • }
    • span {
    •     mix-blend-mode: difference;
    • }

    如你所见,文本“ CSS很棒”仅在其父代的边界内融合。外面的东西不会混在一起。换句话说,它是孤立的。

    事例源码:

    http://codepen.io/shadeed/pen/3b84bf8730ae27563f983e036f96aacb?editors=1100

    isolation 可以通过使用创建新的堆栈上下文的属性来实现。例如,如果父元素具有opacity 属性,这将影响结果。

    「html」

    •    


    「css」

    • div {
    •   opacity: 0.99; /* Creates a new stacking context, which result to an isolated group */
    • }
    • img {
    •   mix-blend-mode: difference;
    • }

    事例源码:

    http://codepen.io/shadeed/pen/b6fcced3fba405846b2e93779282f3cb?editors=0100

    二、进入Background-Blend-Mode

    它的工作方式类似mix-blend-mode,但具有多个背景图像。每个背景可以有自己的混合模式,举个例子。


    在此示例中,将三层混合在一起:基础图像,实心填充(Solid Fill)和渐变填充(radient Fill.)。

    • .elem {
    •     background: linear-gradient(45deg, #000 10%, transparent),
    •               linear-gradient(#3754C7, #3754C7),
    •               url(nature.jpg);
    •   background-size: cover;
    •   background-blend-mode: overlay, color;
    • }

    在CSS中,应该以正确的方式对每个背景进行排序。堆叠顺序从上到下,如上图所示。


    事例源码:

    http://codepen.io/shadeed/pen/b4351fd10c5ff1e0a5b210f87c1040cd?editors=1100

    1. 着色图像

    通过使用径向梯度,有一些有趣的结果比有用。这个想法是添加一个彩色的图像,使它与它混合。

    • :root {
    •   --color: #000;
    •   --size: 250px; /* Gradient Size */
    • }
    • .elem-1 {
    •   background: radial-gradient(circle var(--size) at center, transparent, var(--color)),
    •               url(nature.jpg);
    • }

    通过对元素应用background-blend-mode: color,结果是图像的去饱和版本。


    事例源码:

    http://codepen.io/shadeed/pen/3779d5b0ab6e013487638492573739f8

    2. 「浏览器支持」


    大奖18dj18vip社区温馨提示:
    大奖18dj18vip(www.dastanona.com)十分重视网络版权及其他知识产权的保护,针对网络侵权采取如下版权政策:
    1、大奖18dj18vip有理由相信网友侵犯任何人的版权或作品,(图文,文字,下载,视频,非法传播),大奖18dj18vip有权不事先通知即删除涉嫌侵权的作品和内容
    2、大奖18dj18vip将采取必要的网络技术手段,确认为侵权作品或内容的用户有权进行警告、屏蔽、删除的行为,尽可能的防止侵权行为的发生
    3、大奖18dj18vip影视资源均收集自互联网,没有提供影片资源存储,也未参与录制上传,若大奖18dj18vip收录的资源涉及您的版权或知识产权或其他利益,我们会立即删除
    4、大奖18dj18vip,删帖,投诉,举报,侵权,若大奖18dj18vip侵犯您的权益,附上身份及权利证明,请直接发送邮件到 kefu-sosoba@qq.com 我们将在一个工作日内删除
    soso大奖18dj18vip社区是聚合百度搜索,搜狗搜索,360搜索,新闻,教育,站长,广告,娱乐,影视,微信,网盘,营销,手机,汽车,游戏,论坛综合为一体的大型门户社区www.dastanona.com
    【腾讯云】腾讯云服务器安全可靠高性能,多种配置供您选择
    Powered by www.dastanona.com Copyright © 2013-2020 大奖18dj18vip社区 小黑屋|手机版|地图|关于我们|腾讯云代金券|帮助中心|公共DNS|大奖18dj18vip
    广告服务/项目合作: kefu-sosoba@qq.com  侵权举报邮箱: kefu-sosoba@qq.com  大奖18dj18vip建站时间:创建于2013年07月23日
    免责声明:大奖18dj18vip所有的内容均来自互联网以及第三方作者自由发布,版权归原作者版权所有,大奖18dj18vip不承担任何的法律责任,若有侵权请来信告知,我们立即删除!

    GMT+8, 2020-5-26 17:26 , Processed in 1.155177 second(s), 12 queries , MemCache On.

    快速回复 返回顶部 返回列表