网赚妈妈

 找回密码
 立即注册
搜索
查看: 944|回复: 6

用 CSS 背景混合模式制作高级效果

[复制链接]
  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

    发表于 2018-10-30 19:55:48 | 显示全部楼层 |阅读模式

    点击右上方红色按钮关注“web秀”,让你真正秀起来

    前言

    如果「一图胜千言」,那多图混合创造的效果要超过千言万语。同理,CSS 的混合模式为设计带来的可能性远远超出了你的想象。

    你所听到的 CSS 混合模式,就是三个被现代浏览器所广泛支持的 CSS 属性。这三个属性包含了: - background-blend-mode:用于混合元素背景图案、渐变和颜色 - mix-blend-mode:用于元素与元素之间的混合 - isolation:用户阻止某些元素在mix-blend-mode 使用时被混合

    不过,本文主要聚焦在 background-blend-mode 这个支持度最好的属性上,它能给你带来以往只有 Photoshop 才能做到的引人注目的效果。

    CSS 渐变和 background-blend-mode 组合

    我们使用background属性来设置 CSS 渐变,常用的值如 linear-gradient(), radial-gradient(), repeating-linear-gradient() 以及 repeating-radial-gradient(),而且background属性还能支持多个渐变参数,通过逗号来分隔。

    但如今有了background-blend-mode 属性,我们可以创造更多变化多样的效果。

    光谱背景

    我们通过覆盖三层渐变来创造一个近乎全波段光谱的图像,展示再大家面前。

    .web_bg { background: linear-gradient(red, transparent), linear-gradient(to top left, lime, transparent), linear-gradient(to top right, blue, transparent); background-blend-mode: screen;}
    XkcdKz0bDfaX0Zd2.jpg

    用 CSS 背景混合模式制作高级效果

    以往实现上面的效果只能通过图片,而且图片体积非常的大。而通过 CSS 只需要几行代码即可实现这种效果,更不用说对 HTTP 请求数据量的节省了。

    条纹网格背景

    同样的,通过这个属性我们可以实现出一些有趣的条纹网格背景来:

    .web_bg { background: repeating-linear-gradient( -45deg, transparent 0, transparent 25%, dodgerblue 0, dodgerblue 50% ), repeating-linear-gradient( 45deg, transparent 0, transparent 25%, tomato 0, tomato 50% ), repeating-linear-gradient( transparent 0, transparent 25%, gold 0, gold 50% ), white; background-blend-mode: multiply; background-size: 100px 100px;}
    fcEtSWYNZseGwiNC.jpg

    用 CSS 背景混合模式制作高级效果

    圆圈环绕背景

    再来试点别的,这次通过径向渐变来实现圆圈环绕背景:

    .circles-background { background: radial-gradient( khaki 40px, transparent 0, transparent 100% ), radial-gradient( skyblue 40px, transparent 0, transparent 100% ), radial-gradient( pink 40px, transparent 0, transparent 100% ), snow; background-blend-mode: multiply; background-size: 100px 100px; background-position: 0 0, 33px 33px, -33px -33px;}
    I8vOYZmZ688d77aP.jpg

    用 CSS 背景混合模式制作高级效果

    更多背景

    更多渐变图案集合请点击下方“了解更多”,可以让你快速的在自己的网站里使用。

    公告

    喜欢小编的点击关注,了解更多知识!

    演示地址页源码,请点击下方“了解更多”!

    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-30 19:56:49 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-30 20:08:39 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-30 20:20:17 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-30 20:32:23 | 显示全部楼层
    转发
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-30 20:44:51 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-30 20:56:12 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

    xml|2.xml|QQ3014497968|文章发布|签到|小黑屋|网赚论坛-致富项目网络赚钱平台 |网站地图

    GMT+8, 2019-10-22 08:49 , Processed in 0.158172 second(s), 14 queries , File On.

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

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