NNNNzs

NNNNzs 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

前端在学

个人动态

NNNNzs 提出了问题 · 8月21日

gitlab-ci部署前端项目关于缓存的问题

# 流程
stages:
  - install
  - build
  - deploy

# 缓存
cache:
  paths:
    - node_modules/
    - dist/

# 安装依赖
install:
  stage: install
  only:
    - test
  tags:
    - test-vue
  script:
    - cnpm install
    - whoami
    - ls

# 构建
build:
  stage: build
  only:
    - test
  tags:
    - test-vue
  script:
    - pwd 
    - whoami
    - npm run build
  artifacts:
    name: 'bundle'
    paths: 
      - dist/

# 部署开发服务器
deploy:
  stage: deploy
  only:
    - test
  tags:
    - test-vue
  script:
    - "[[ -z ${CI_PROJECT_PATH_SLUG} ]] && echo 'CI_PROJECT_PATH_SLUG is empty.' && exit 1"
    - "webpath=/www/web/${CI_PROJECT_PATH_SLUG}"
    - rsync -azv dist/  ${webpath}
    - echo ${webpath}

问题在全部设置了cache,然后部署的时候读取了dist里面的缓存,这样部署的都是缓存,可是不设置缓存,在不同job里面生成的内容没办法进入下一阶段,就会提示找不到文件的问题,该如何解决?

关注 2 回答 0

NNNNzs 赞了文章 · 8月9日

上天的Node.js之爬虫篇 15行代码爬取京东淘宝资源 【深入浅出】

难道爬虫只能用 python 做? 不,我们上天的 Node.js 也可以做!
  • 需要准备的包

    • Node.js的最新版本 下载地址 Node.js官网
    • npm 包管理器下载 下载最新的官网版本 Node.js 会自带 npm
    • npm的第三方包 puppeteer 在对应的js文件内运行命令行工具 npm i puppeteer -D 即可
爬虫在获取某些有保护机制的网页时可能会失效

初入江湖 -自在地境篇

const puppeteer = require('puppeteer'); //  引入依赖  
(async () => {   //使用async函数完美异步 
    const browser = await puppeteer.launch();  //打开新的浏览器
    const page = await browser.newPage();   // 打开新的网页 
    await page.goto('https://www.jd.com/');  //前往里面 'url' 的网页
    const result = await page.evaluate(() => {   //这个result数组包含所有的图片src地址
        let arr = []; //这个箭头函数内部写处理的逻辑  
        const imgs = document.querySelectorAll('img');
        imgs.forEach(function (item) {
            arr.push(item.src)
        })
        return arr 
    });
    // '此时的result就是得到的爬虫数据,可以通过'fs'模块保存'
})()

  复制过去 使用命令行命令 ` node 文件名 ` 就可以运行获取爬虫数据了 
这个 puppeteer 的包 ,其实是替我们开启了另一个浏览器,重新去开启网页,获取它们的数据。

潇洒入世 -逍遥天境篇

  • 上面只爬取了京东首页的图片内容,假设我的需求进一步扩大,需要爬取京东首页

中的所有<a> 标签对应的跳转网页中的所有 title的文字内容,最后放到一个数组中

  • 我们的async函数上面一共分了五步, 只有 puppeteer.launch() ,

browser.newPage(), browser.close() 是固定的写法。

  • page.goto 指定我们去哪个网页爬取数据,可以更换内部url地址,也可以多次

调用这个方法。

  • page.evaluate 这个函数,内部是处理我们进入想要爬取网页的数据逻辑
  • page.goto page.evaluate两个方法,可以在async内部调用多次,

那意味着我们可以先进入京东网页,处理逻辑后,再次调用page.goto这个函数,

注意,上面这一切逻辑,都是puppeteer这个包帮我们在看不见的地方开启了另外一个
浏览器,然后处理逻辑,所以最终要调用browser.close()方法关闭那个浏览器。
  • 这时候我们对上一篇的代码进行优化,爬取对应的资源。
 const puppeteer = require('puppeteer');
(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://www.jd.com/');
    const hrefArr = await page.evaluate(() => {
        let arr = [];
        const aNodes = document.querySelectorAll('.cate_menu_lk');
        aNodes.forEach(function (item) {
            arr.push(item.href)
        })
        return arr
    });
    let arr = [];
    for (let i = 0; i < hrefArr.length; i++) {
        const url = hrefArr[i];
        console.log(url) //这里可以打印 
        await page.goto(url);
        const result = await page.evaluate(() => { //这个方法内部console.log无效 
            
              return  $('title').text();  //返回每个界面的title文字内容
        });
        arr.push(result)  //每次循环给数组中添加对应的值
    }
    console.log(arr)  //得到对应的数据  可以通过Node.js的 fs 模块保存到本地
    await browser.close()
})()
上面有天坑 page.evaluate函数内部的console.log不能打印,而且内部不能获取外部的变量,只能return返回,
使用的选择器必须先去对应界面的控制台实验过能不能选择DOM再使用,比如京东无法使用querySelector。这里由于
京东的分界面都使用了jQuery,所以我们可以用jQuery,总之他们开发能用的选择器,我们都可以用,否则就不可以。

威震武林 -神游玄境篇

数据在这个时代非常珍贵,上面两个能获取一些指定的特定资源,按照网页的设计逻辑,选定特定的href的地址,
可以先直接获取对应的资源,也可以通过再次使用 page.goto方法进入,再调用 page.evaluate() 处理逻辑。
这里就不做过多介绍了,毕竟 Node.js 是可以上天的,或许未来它真的什么都能做。这么优质简短的教程,请收藏
或者转发给您的朋友,谢谢。
查看原文

赞 22 收藏 15 评论 0

NNNNzs 关注了专栏 · 8月9日

前端巅峰

注重前端性能优化和前沿技术,重型跨平台开发,即时通讯技术等。 欢迎关注微信公众号:前端巅峰

关注 16737

NNNNzs 收藏了文章 · 6月1日

通过 41 个 问题增加对学习 Git 的理解

作者:Duomly
译者:前端小智
来源:dev.to
点赞再看,养成习惯

本文 GitHubhttps://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。


为了保证的可读性,本文采用意译而非直译。

1. 你最喜欢的 Git 命令是什么

个人比较喜欢 git add -p. 这增加了“补丁模式”的变化,这是一个内置的命令行程序。它遍历了每个更改,并要求确认是否要执行它们。

这个命令迫使咱们放慢速度并检查更改文件。作为开发人员,咱们有时常常急于提交,我自己也经常这样,做完运行 git add . 才发现把调试的代码也提交上去了。

2. 为什么你更喜欢直接使用 git 命令

作为开发人员,咱们也经常使用其它命令来做其它事情,也不差用 git 的命令来做事。

此外,git 命令也是非常短的,非常容易学习,并且使用命令可以了解 git 的工作流程,这样也间接改进了开发工作流程。

3. 如何使用 stage 命令

stageadd .的内置别名。

4.如何在分支中保存更改并 checkout 到其他分支

因此,可以使用 git stash 临时存储更改或提交 WIP,目的是要有未修改前的环境。就我个人而言,我更喜欢使用 WIP 提交而不是 stash,因为它们更容易引用和共享。

WIP = Work in Progress

研发中的代码想存储起来,但是又避免研发中的代码被合并,开发就会创建一个WIP的分支

WIP MR

WIP MR 含义是 在工作过程中的合并请求,是一个我们在 GitLab 中避免 MR 在准备就绪前被合并的技术。只需要添加 WIP: 在 MR 的标题开头,它将不会被合并,除非你把 WIP: 删除。

5.什么时候使用 git stash

发现有一个类是多余的,想删掉它又担心以后需要查看它的代码,想保存它但又不想增加一个脏的提交。这时就可以考虑 git stash

6.如何使用 git 命令

对任何命令使用 --help选项,例如,git stash --help

7. 什么是“ git flow”?

Git Flow 定义了一个项目发布的分支模型,为管理具有预定发布周期的大型项目提供了一个健壮的框架,是由 Vincent Driessen 提出的一个 git 操作流程标准、解决当分支过多时 , 如何有效快速管理这些分支。

8.什么是 GitHub flow ?

GitHub flow,顾名思义,就是 GitHub 所推崇的 Workflow。(千万不要理解成 GitHub 上才能用的 Workflow), 基本上,GitHub Flow 是master/feature分支工作流程的品牌名称。

GitHub flow 的核心优势在于其流程带来的自动化可能性,能够做到其它流程无法实现的检查过程,并极大简化开发团队的体力劳动,真正发挥自身的价值。

9.你更喜欢哪种分支策略?

大多数 Git项目都是 “Git flow”。这些项目中只有少数需要这种策略,通常是因为它是版本化的软件。

master/feature 分支策略更易于管理,尤其是在刚入门时,如果需要,切换到 “git flow” 非常容易。

10. git open 命令是做啥用的

这是一个单独的命令,可以作为 npm 包使用。

11.当在其他分支中添加的文件仍然在工作分支中显示为未跟踪或修改时,如何重置分支

这通常是“工作索引”不干净时切换分支的结果。

在 git 中没有内置的方法来纠正这一点。通常通过确保提示符有一个 “status” 指示符并在每次更改分支时运行诸如 git status 之类的命令来避免这种情况。这些习惯会让咱们尽早发现这些问题,这样就可以在新的分支上 stashcommit 这些更改。

12. 如何重命名分支?

git branch -m current-branch-name new-branch-name

13. 如何使用 cherry-pick

git cherry-pick [reference] 请记住,这是一个重新应用的命令,因此它将更改提交 SHA。

14. 如果从一个分支恢复(例如 HEAD~3),是否可以再次返回到 HEAD(比如恢复上一次更新)

在这种情况下,通过运行 git reset --hard HEAD~1 立即撤消还原提交(即 HEAD 提交)。

15. 什么时候使用 git pullgit fetch

git pull将下载提交到当前分支。记住,git pull实际上是 fetchmerge 命令的组合。

git fetch将从远程获取最新的引用。

一个很好的类比是播客播放器或电子邮件客户端。咱们可能会检索最新的播客或电子邮件(fetch),但实际上尚未在本地下载播客或电子邮件附件(pull)。

16. 为什么有时需要使用 --force 来强制提交更改

rebase 是一个可以重新提交的命令,它改变了 SHA1 hash。如果是这样,本地提交历史将不再与其远程分支保持一致。

当这种情况发生时,push 会被拒绝。只有在被拒绝时,才应该考虑使用 git push --force。这样做将用本地提交历史覆盖远程提交历史。所以可以回过头来想想,想想为什么要使用 --force

17. 可以使用分支合并多个分支,然后将该分支发送给 master 吗?

当然可以,在大多数 git 工作流下,分支通常会累积来自多个其他分支的更改,最终这些分支会被合并到主分支。

18. 应该从一个非常老的分支做一个 rebase 吗?

除非是迫不得已。

根据你的工作流,可以将旧的分支合并到主分支中。

如果你需要一个最新的分支,我更喜欢 rebase。它只提供更改且更清晰的历史记录,而不是来自其他分支或合并的提交。

然而,尽管总是可能的,但是使用 rebase 可能是一个痛苦的过程,因为每次提交都要重新应用。这可能会导致多重冲突。如果是这样,我通常使用rebase --abort 并使用 merge 来一次性解决所有冲突。

19. 使用 rebase -i 时,squashfixup 有什么区别

squash 和 fixup 结合两个提交。squash 暂停 rebase 进程,并允许咱们调整提交的消息。fixup 自动使用来自第一次提交的消息。

20. 通常,当使用 master 重新建立功能分支时,对于每次提交都需要解决冲突?

是的。由于每次提交的更改都会在 rebase 期间重新应用,所以必须在冲突发生时解决它们。

这意味着在提交之前就已经有了提交冲突,如果没有正确地解决它,那么下面的许多提交也可能发生冲突。为了限制这一点,我经常使用 rebase -i 来压缩提交历史记录,以便更轻松地使用它。

如果许多提交之间仍然存在冲突,可以使用 merge

21.在与 master 合并之前,有必要更新我的分支吗

根据你的工作流,可以将旧的分支合并到主分支中。如果你的工作流仅使用 "fast-forward"合并,那么有必要在合并之前更新你的分支。

Git fast forward 提交

多人协同开发,使用 Git 经常会看到警告信息包含术语:fast forward, 这是何义?

简单来说就是提交到远程中心仓库的代码必须是按照时间顺序的。

比如 A 从中心仓库拿到代码后,对文件 f 进行了修改。然后 push 到中心仓库。

BA 之前就拿到了中心仓库的代码,在 A push 成功之后也对 f 文件进行了修改。这个时候 B 也运行 push 命令推送代码。

会收到一个类似下面的信息:

chenshu@sloop2:~/work/189/appengine$ git pushTo 
ssh://csfreebird@10.112.18.189:29418/appengine.git ! [rejected]       
master -> master (non-fast-forward)error: failed to push some refs to 
'ssh://csfreebird@10.112.18.189:29418/appengine.git'To prevent you from losing 
history, non-fast-forward updates were rejectedMerge the remote changes (e.g. 'git 
pull') before pushing again.  See the'Note about fast-forwards' section of 'git push --help' for details.

提醒你非快进方式的更新被拒绝了,需要先从中心仓库pull到最新版本,merge后再 push.

fast forward 能够保证不会强制覆盖别人的代码,确保了多人协同开发。尽量不要使用 non fast forward方法提交代码。

22. 需要使用 GitKraken 这种可视化工具吗

我比较喜欢用命令方式使用 git,因为这使我能够完全控制管理变更,就像使用命令来改进我的开发过程一样。

当然,某些可视化操作(如管理分支和查看文件差异)在GUI中总是更好。我个人认为在合并过程中在浏览器中查看这些内容就足够了。

23. 当提交已经被推送时,可以做一个 --amend 修改吗?

可以,git commit –amend 既可以对上次提交的内容进行修改,也可以修改提交说明。

24.在做迭代内容时,当完成一个小功能需要先拉一个 pull request 请求,还是都做完这个迭代内容后在拉一个 pull request 请求

咱们通常做法是,完成一个迭代的内容后在拉一个 pull request。然而,如果你某个任务上花了很长时间,先合并做的功能可能是有益的。这样做可以防止对分支的依赖或过时,所以做完一个拉一个请求,还是全部做完在拉一个请求,这决于你正在进行的更改的类型。

25. 在将分支合并到 master 之前,需要先创建一个 release 分支吗?

这在很大程度上取决于你们公司的部署过程。创建 release 分支对于将多个分支的工作分组在一起并将它们合并到主分支之前进行整体测试是有益的。

由于源分支保持独立和未合并,所以在最后的合并中拥有更大的灵活性。

26. 如何从 master 获取一些提交?比方说,我不想执行最后一次提交,而是进行一次 rebase

假设 master 分支是咱们的主分支,咱们不希望有选择地从它的历史记录中提取提交,这会以后引起冲突。

咱们想要 mergerebase 分支的所有更改。要从主分支之外的分支提取选择提交,可以使用 git cherry-pick

27. 如何在 git 终端配置颜色

默认情况 下git 是黑白的。

git config --global color.status auto 
git config --global color.diff auto 
git config --global color.branch auto 
git config --global color.interactive auto

配置之后,就有颜色了。

28. 有没有更好的命令来替代 git push -force ?

实际上,没有其他方法可以替代 git push—force。虽然这样,如果正确地使用 mergerebase 更新分支,则无需使用 git push --force

只有当你运行了更改本地提交历史的命令时,才应该使用 git push --force

29. 当我在 git rebase - 选择drop时,是否删除了与该提交相关的代码?

是的。要恢复这段代码,需要在 reflogrebase 之前找到一个状态。

30. 如何自动跟踪远程分支

通常,当你 checkout 或创建分支时,Git 会自动设置分支跟踪。

如果没有,则可以在下一次使用以下命令进行更新时:git push -u remote-name branch-name

或者可以使用以下命令显式设置它:git branch --set-upstream-to = remote-name / branch-name

31. 在 rebase 分支之前更新分支,是一个好的习惯吗?

我认为是这样的,原因很简单,用git rebase -i 组织或压缩提交,首先在更新过程中提供更多的上下文。

32. 有没有一种方法可以将提交拆分为更多的提交(与 fixup/squash 相反)?

可以在rebase -i过程中使用 exec 命令来尝试修改工作索引并拆分更改。还可以使用 git reset 来撤消最近的提交,并将它们的更改放入工作索引中,然后将它们的更改分离到新的提交中。

33.有没有办法查看已修复的提交?

git log

查看日志,找到对应的修改记录,但是这种查找只能看到文件,而不是文件的内容。

git blame 文件名

查看这个文件的修改记录,默认显示整个文件,也可以通过参数 -L <start>,<end>来检查需要修改的某几行。

如果查看之前提交的内容可以使用 git show commitId

34. rebase --skip 作用是啥?

咱们知道 rebase 的过程首先会产生 rebase 分支(master)的备份,放到(no branch )临时分支中。再将支线分支(branch)的每一次提交修改,以补丁的形式,一个个的重新应用到主干分支上。这个过程是一个循环应用补丁的过程,期间只要补丁产生冲突,就会停止循环,等待手动解决冲突。这个冲突指的是上一个合并后版本与补丁之间的冲突。

git rebase --skip 命令,可以跳过某一次补丁(存在上一轮冲突的解决方案中,已经包含了这一轮的补丁内容,这样会使补丁无效,需要跳过),这个命令慎用。

35. 如何删除远程分支?

可以使用:git push origin:branch-name-to-remove 或使用 -d选项:git push -d origin someother -branch-2 来删除远程分支。

要删除对远程分支的本地引用,可以运行:git remote prune origin

36. checkoutreset 有什么区别

这两个命令都可以用来撤销更改。checkout 可能更健壮,因为它不仅允许撤消当前更改,而且还允许通过检索文件的旧版本撤消一组更改。

默认情况下,reset更适合于更改工作索引中更改的状态。因此,它实际上只处理当前的变化。

git checkout -- file;撤销对工作区修改;这个命令是以最新的存储时间节点(add和commit)为参照,覆盖工作区对应文件file;这个命令改变的是工作区。

git reset HEAD -- file;清空 add 命令向暂存区提交的关于 file 文件的修改(Ustage);这个命令仅改变暂存区,并不改变工作区,这意味着在无任何其他操作的情况下,工作区中的实际文件同该命令运行之前无任何变化

37. 在正常的工作流程中应该避免使用哪些命令

一些可能会破坏历史记录的内容,例如:

git push origin master -f (千万不要这样做)
git revert
git cherry-pick (changes from master)

在正常的工作流程下,尽量避免直接使用git merge,因为这通常是通过拉请求(pull requests)构建到流程中的。

38. 如果我有一个分支(B)指向另一个分支(A),而我又有另一个分支(C),它需要(A)和(B)及 mast 分支的代码,怎么个流程才能更新(C)?

这取决于几件事:

如果 AB 可以合并到 master,刚可以将 AB 合并到 master 中,然后用master的更新 C

如果 AB 不能合并到 master,可以简单地将 B 合并到 C 中,因为 B 已经包含了 A 的变更。

在极端的情况下,可以将 ABmaster 合并到 C 中。然而,为了避免冲突,合并的顺序可能很重要。

39. 你使用的别名有哪些

我常用的一些 git 别名如下:

alias.unstage reset HEAD --
alias.append commit --amend --no-edit
alias.wip commit -m "WIP"
alias.logo log --oneline
alias.lola log --graph --oneline --decorate --all

40. 鲜为人知的 git 命令有哪些?

git bisect 是查找代码中存在的bug的救命工具。虽然只使用过几次,但它的精确度令人印象深刻,节省了大量时间。

git archive 是用于打包一组更改的好工具。这有助于与第三方或 mico-deployment 共享工作。

git reflog 可能是众所周知的,但值得一提,因为它提供了一种在出错时“撤消”命令的好方法。

41. 你能推荐一些关于Git的书籍吗

我建议至少阅读Pro Git的前三章。这些年来,每看到一遍,或多或少都有收获。

<Git 学习指南> 也不错。


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://dev.to/gonedark/42-gi...


交流

文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

查看原文

NNNNzs 收藏了文章 · 4月12日

简单说 CSS中的mask—好好利用mask-image

说明

CSS中的mask属性允许用户屏蔽或剪裁特定点的图像来实现,部分或完全隐藏某个元素的可见性。
好吧,这个概念可能有点不好理解,先看图。

图片描述

看了这个等式,似乎明白点什么了吧,朋友们,第一张图就是一张普通的图,第二张图,黑色部分是不透明的,白色部分是透明的,用上mask之后,两张图重叠,黑色区域中的会显示出来,白色区域不显示。

用过ps的朋友,应该很清楚,蒙版这东西,这就和蒙版很像,好吧,没用过ps的朋友,又要问蒙版是什么了,相信看完这篇文章,你应该连蒙版也知道了。

mask和background用法是相仿的,mask的值有这些

mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type

具体细节参考这里:
CSS background 属性
CSS mask 属性

解释

由于目前,只有webkit内核的浏览器支持mask属性,所以考虑到兼容性的话,用mask属性的时候还是要想想的。

今天我们主要说说 mask-image,这个比较有意思,这两个单词翻译过来就是,面具 图片,的确很形象,真的就像是给元素带上一个面具一样。
我们直接上代码,把上面提到那个等式,实现一下,顺便说一句,mask-image 和 background-image 一样,不仅可以取值是 图片路径,也可以是渐变色。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">

  <style>
    .mask{
        width:475px;
        height:260px;
        background-image:url("http://img.blog.csdn.net/20170701221659356");

        /* 取值是图片路径 */
        -webkit-mask-image:url("http://img.blog.csdn.net/20170701221732018");
    }
  </style>
 </head>
 <body>
    <div class="mask"> </div>
 </body>

</html>

background-image

图片描述

-webkit-mask-image

图片描述

效果图

图片描述

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">

  <style>
    .mask{
        width:475px;
        height:260px;
        background-image:url("http://img.blog.csdn.net/20170701221659356");

        /* 取值是渐变色 */
        -webkit-mask-image:linear-gradient(blue, transparent);
    }
  </style>
 </head>
 <body>
    <div class="mask"> </div>
 </body>

</html>

效果图

图片描述

我再善意的提醒下,-webkit-mask-image 的值应该是一张,背景是透明色的图,或者说有透明色,而透明色的区域,最后都是不显示的。

下面是mask 和 animation 配合完成的一个效果
效果图

图片描述

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">

  <style>
     @keyframes mask{
        0% {-webkit-mask-position:0px 0px;}
        25% {-webkit-mask-position:619px 0px;}
        50% {-webkit-mask-position:0px 0px;}
        75% {-webkit-mask-position:308px 0px;-webkit-mask-size:100%;}
        100% {-webkit-mask-size:1000%;}
     }

    .mask{
        width:700px;
        height:392px;
        background:black url("http://www.kkkk1000.com/images/mask-image/1534750163.jpg");
        -webkit-mask-image:url("http://www.kkkk1000.com/images/mask-image/1534750222.jpg");
        animation:mask 5s linear infinite forwards;
    }
  </style>
 </head>
 <body>
    <div class="mask"> </div>
 </body>

</html>

总结

说了这么多相信你也一定明白mask-image属性了,如果还是不清楚,那就多看看下面这张图吧!!!
图片描述

查看原文

NNNNzs 赞了文章 · 4月12日

简单说 CSS中的mask—好好利用mask-image

说明

CSS中的mask属性允许用户屏蔽或剪裁特定点的图像来实现,部分或完全隐藏某个元素的可见性。
好吧,这个概念可能有点不好理解,先看图。

图片描述

看了这个等式,似乎明白点什么了吧,朋友们,第一张图就是一张普通的图,第二张图,黑色部分是不透明的,白色部分是透明的,用上mask之后,两张图重叠,黑色区域中的会显示出来,白色区域不显示。

用过ps的朋友,应该很清楚,蒙版这东西,这就和蒙版很像,好吧,没用过ps的朋友,又要问蒙版是什么了,相信看完这篇文章,你应该连蒙版也知道了。

mask和background用法是相仿的,mask的值有这些

mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type

具体细节参考这里:
CSS background 属性
CSS mask 属性

解释

由于目前,只有webkit内核的浏览器支持mask属性,所以考虑到兼容性的话,用mask属性的时候还是要想想的。

今天我们主要说说 mask-image,这个比较有意思,这两个单词翻译过来就是,面具 图片,的确很形象,真的就像是给元素带上一个面具一样。
我们直接上代码,把上面提到那个等式,实现一下,顺便说一句,mask-image 和 background-image 一样,不仅可以取值是 图片路径,也可以是渐变色。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">

  <style>
    .mask{
        width:475px;
        height:260px;
        background-image:url("http://img.blog.csdn.net/20170701221659356");

        /* 取值是图片路径 */
        -webkit-mask-image:url("http://img.blog.csdn.net/20170701221732018");
    }
  </style>
 </head>
 <body>
    <div class="mask"> </div>
 </body>

</html>

background-image

图片描述

-webkit-mask-image

图片描述

效果图

图片描述

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">

  <style>
    .mask{
        width:475px;
        height:260px;
        background-image:url("http://img.blog.csdn.net/20170701221659356");

        /* 取值是渐变色 */
        -webkit-mask-image:linear-gradient(blue, transparent);
    }
  </style>
 </head>
 <body>
    <div class="mask"> </div>
 </body>

</html>

效果图

图片描述

我再善意的提醒下,-webkit-mask-image 的值应该是一张,背景是透明色的图,或者说有透明色,而透明色的区域,最后都是不显示的。

下面是mask 和 animation 配合完成的一个效果
效果图

图片描述

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">

  <style>
     @keyframes mask{
        0% {-webkit-mask-position:0px 0px;}
        25% {-webkit-mask-position:619px 0px;}
        50% {-webkit-mask-position:0px 0px;}
        75% {-webkit-mask-position:308px 0px;-webkit-mask-size:100%;}
        100% {-webkit-mask-size:1000%;}
     }

    .mask{
        width:700px;
        height:392px;
        background:black url("http://www.kkkk1000.com/images/mask-image/1534750163.jpg");
        -webkit-mask-image:url("http://www.kkkk1000.com/images/mask-image/1534750222.jpg");
        animation:mask 5s linear infinite forwards;
    }
  </style>
 </head>
 <body>
    <div class="mask"> </div>
 </body>

</html>

总结

说了这么多相信你也一定明白mask-image属性了,如果还是不清楚,那就多看看下面这张图吧!!!
图片描述

查看原文

赞 26 收藏 23 评论 1

NNNNzs 关注了专栏 · 4月1日

深入前端

编程是一种艺术

关注 89

NNNNzs 回答了问题 · 2月16日

如何计算移动端首屏加载时间和页面开始加载到加载完成这段时间?

<head>
...
<srcipt>
console.time('首屏');
window.onload=function(){
    console.timeEnd('首屏')
}
</script>
...
</head>

关注 3 回答 2

NNNNzs 回答了问题 · 2月16日

解决element中有“事件”和“方法”的说明,但是不是很理解

组件方法是主动调用的
组件事件是监听的

<el-input ref="input" @blur="handlerBlur" />
...
mounted(){
    this.$refs.input.focus()
}
methods:{
    handlerBlur(e){
        //todo
    },    
}

关注 3 回答 2

认证与成就

  • 获得 5 次点赞
  • 获得 13 枚徽章 获得 0 枚金徽章, 获得 1 枚银徽章, 获得 12 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-08-04
个人主页被 378 人浏览