zoukankan      html  css  js  c++  java
  • CSS 图像遮罩 和文本 background-clip:text; mask-image

    CSS 图像遮罩 和文本 

     

    英文原文:CSS Mask-Image & Text

     

    近期我写了一篇关于控制Web排版的文章,专注于CSS 伪选择器以及深入到字母的控制方法。作为Web设计者,我想要web设计达到印刷设计师能达到的控制层次,甚至包括纹理。我慢慢爱上了两种webkit CSS属性,并希望它们能获得更多的浏览器支持。我最爱的是background-clip:text;但是目前需要可怕的降级。第二个是mask-image,它可用于文字的效果。

    在下面的例子中,我在文字上实现了轻微的灰度斑点纹理。鼠标移入该文字上方可以看到在不支持该特性的浏览器显示的效果。

    以下是去除结构部分的CSS代码:

    .mask-box h3, .mask-box p{
    -webkit-mask-image: url(/path/to/mask.png);
    -o-mask-image: url(/path/to/mask.png);
    -moz-mask-image: url(/path/to/mask.png);
    mask-image: url(/path/to/mask.png);
    text-shadow: 0px 0px 30px rgba(30, 28, 28, 0.6);}

    在许多地方,我更喜欢文字稍微使用纹理。我见过使用mask-image的最好的例子是Squared Eye的Matthew Smith设计、Michael Meyer实现的页面:A Night For Adoption。

    如果你也加入到使用CSS3属性的行列中,别忘了background-clip:text 和 mask-image, 高级CSS伪选择器,CSS transforms。我们将不再有理由使用图片来制作精美的web了。

  • 相关阅读:
    Docker 安装及使用
    明明白白学 同步、异步、阻塞与非阻塞
    ArrayList 并发操作 ConcurrentModificationException 异常
    shell 脚本防止ddos
    shell 脚本备份数据库
    shell 脚本猜数字
    shell 脚本检测主从状态
    tomcat 结合apache 动静分离
    shell 脚本检测网站存活
    zabbix 4.0 版本 yum安装
  • 原文地址:https://www.cnblogs.com/lonicera/p/background-clip.html
Copyright © 2011-2022 走看看