-webkit-mask-...

CSS

字数统计: 138阅读时长: 1 min

 2019/09/01   Share

CSS遮罩 -webkit-mask- 属性

-webkit-mask-position: -71.9766px 0px;

-webkit-mask-size: 143.953px 216.797px;

-webkit-mask-image: -webkit-gradient(linear, 0% 100%, 100% 100%, 
from(rgb(0, 0, 0)),
color-stop(0.45, rgb(0, 0, 0)), 
color-stop(0.5, rgba(0, 0, 0, 0)), 
color-stop(0.55, rgba(0, 0, 0, 0)), 
to(rgba(0, 0, 0, 0)))

-webkit-mask-image：后的图片或者是其他属性，透明部分不显示，不透明部分显示；如上数据则是透明度为1处（未显式设置）遮罩效果为0即透明，透明度为0处遮罩效果为1即完全遮挡

原文作者：ylinwind

原文链接：https://ylinwind.github.io/2019/09/01/ylin-20190901-01/

发表日期：September 1st 2019, 8:49:03 am

更新日期：September 1st 2019, 8:55:48 am

Next Post

用css渐变来实现slider拖动组件已拖动和未拖动的部分颜色
Previous Post

D3.js 刨坑系列

CATALOG

1. CSS遮罩 -webkit-mask- 属性



缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是archer根目录）执行以下命令：
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: true
    tags: true