CSS3 的一对孪生兄弟之 background & mask

时间  2019-11-17
标签 css3 css 一对 孪生兄弟 background mask 栏目 CSS 繁體版
原文   原文链接

前言css

不少人在作前端开发的时候基本都用过 background 属性，可是 mask 属性却不多使用，甚至有些许陌生。可是实际上 mask 与 background 同样简单方便，甚至在某些地方比 background 更有优点！今天咱们就来深度学习一下 background & mask！html

再谈盒模型

可能有人会问为啥这里又提起盒模型的概念？实际上不少老师在讲述盒模型的时候，重心都放在了 margin、padding 和 border 上。而咱们今天再谈的盒模型与这些无关。前端

既然叫盒模型，任何盒子都应该有一个地面和一个盖子，就如上图所示同样。咱们 div 中的内容放在盒子里面，天然也就在盒子底面的上面，而这里的底面就是咱们今天要说的 background，背景。说到这里我想你们也应该意识到，这里的盖子就是咱们要说的 mask，遮罩。git

经常使用的几个基本属性

图像是由 rgb 三个通道以及第四个通道——alpha 通道，来绘制的。github

mask 的功能就是使用透明的图片或渐变遮罩元素的背景。因而，mask 与背景 background 很是相似。这就是为何说 background 和 mask 是一对孪生兄弟！web

值得一提：mask-mode 仅 Firefox 浏览器支持，Chrome 浏览器是基于 alpha 遮罩。遮罩元素的alpha值为0的时候会彻底覆盖下面的元素，为1的时候会彻底显示下面的内容。这里咱们以 Chrome 浏览器做为咱们的开发环境，因此 mask 在这里仅使用 alpha 遮罩。在这里我也不会讨论 mask-mode 属性，若有需求请自行查阅资料！浏览器

共性

先举个栗子：bash

如今有结构以下：app

<div class="wrapper">
  <div class="container">
    我爱你！我爱你！我爱你！我爱你！我爱你！我爱你！我爱你！我爱你！我爱你！
  </div>
</div>
复制代码

样式以下：wordpress

.container {
  width: 250px;
  height: 250px;
  font-size: 2rem;
  overflow: hidden;
}
复制代码

  1. background-image & mask-image

    • none（默认值）

      啥都没有

    • gradient

      添加渐变色！

      咱们给以前的结构加个渐变背景色：

      background-image: -webkit-gradient(
  linear,
  left top,
  right bottom,
  from(rgb(255, 192, 159)),
  to(rgb(255, 238, 147))
);
复制代码

      咱们再加一个遮罩 maks，这里咱们用了一张 png 图片，以下：

      -webkit-mask-image: url(../images/example.png);
复制代码

      这里咱们不用渐变色是有缘由的，由于 Chrome 浏览器所支持的 mask-mood 只基于 alpha 通道，因此渐变自己的颜色并不会做用于样式上，只有 rgba 中的第四通道值是有效的。并且显示出来的只有不一样透明程度的白色样式，具体以下：

      -webkit-mask-image: -webkit-gradient(
  linear,
  left bottom,
  right top,
  from(rgba(221, 80, 67, 1)),
  to(rgba(0, 0, 0, 0))
);
复制代码

      遮罩元素的 alpha 值为 0 的时候会彻底覆盖下面的元素，为 1 的时候会彻底显示下面的内容。这也是为啥咱们选择 png 图片的缘由。

  2. background-size & mask-size

    设置背景或者遮罩图片的大小。

    这里咱们先将背景换为一张图片：

    分辨率 3937×5906

    .container {
  width: 250px;
  height: 250px;
  font-size: 2rem;
  overflow: hidden;
  background-image: url(../images/man.jpg);
}
复制代码

    这时候的样式以下：

    背景图片之因此只显示了左上角的一小部分是由于背景图片的分辨率太大了，而咱们的盒子只是 250px×250px 的大小，默认背景图片的左上角与盒子的左上角是一致的，因此只显示了左上角一小部分。

    这里咱们就能够运用 background-size 属性来进行调整了：

    background-size: length|percentage（以父元素的百分比来设置背景图像的宽度和高度）|cover|contain;
复制代码

    这里着重讨论 cover|contain 这两个值：

    属性值 描述
    cover 把背景图像扩展至足够大，以使背景图像彻底覆盖背景区域。背景图像的某些部分也许没法显示在背景定位区域中。
    contain 把图像图像扩展至最大尺寸，以使其宽度和高度彻底适应内容区域。

    咱们这里为了让背景图片彻底显示，因此旋转 contain。

    background-size: contain;
复制代码

    咱们也为 mask 添加 mask-size，这里咱们使用 cover。

    -webkit-mask-size: cover;
复制代码

    因为咱们 mask 的图片长宽比与盒子长宽比同样，因此咱们只能看到一个遮罩图片。

  3. background-repeat & mask-repeat

    这个字面意思就是：背景图片或者遮罩是否重复出现。

    对于这一属性只有两个值：repeat（重复（默认值））/no-repeat（不重复（仅显示一次））

    这里咱们添加以下两个属性：

    background-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
复制代码

    能够看到背景只显示了一次而并未重复出现。因为咱们的遮罩自己就只能看到一次，因此在这里设置 no-repeat 并无什么实际效果。

  4. background-position & mask-position

    设置背景图片或者遮罩图片的位置。

    值 描述
    x y
    x,y=top|left|right|bottom|center    		 若是您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
    能够接偏移量，如：background-position: right 40px bottom 20px;
    x% y% 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。若是您仅规定了一个值，另外一个值将是 50%。
    xpos ypos 第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其余的 CSS 单位。若是您仅规定了一个值，另外一个值将是 50%。您能够混合使用 % 和 position 值。

    这里有一点须要注意：

    <position>值对应的容器坐标位置实际上有一个公式的：

    positionX = (容器的宽度-图片的宽度) * percentX;
positionY = (容器的高度-图片的高度) * percentY;
复制代码

    当background-position:100% 100%时候，实际定位值就是容器尺寸和图片尺寸的差别，因而就有了右下角定位效果。

    了解更多CSS 值简介理解 background 百分比定位

    这里咱们让背景图片居中，且改变 mask 的大小为容器宽度的一半，让其也居中显示。

    background-position: center;
-webkit-mask-size: 50%;
-webkit-mask-position: center;
复制代码

    能够看到背景和缩小后的遮罩都已经居中显示了。

  5. background-origin & mask-origin

    规定 background-position 和 mask-position 属性相对于什么位置来定位。

    background-origin: padding-box（默认值）|border-box|content-box;
-webkit-mask-origin: padding-box|border-box（默认值）|content-box|margin-box;
复制代码
    值 描述
    padding-box 背景图像相对于内边距框来定位。
    border-box 背景图像相对于边框盒来定位。
    content-box 背景图像相对于内容框来定位。
    margin-box 背景图像相对于边距框来定位。

    咱们从新写一下盒子样式：

    .container {
  width: 250px;
  height: 250px;
  font-size: 2rem;
  overflow: hidden;
  border: 10px solid rgba(255, 0, 0, 0.5);
  background-image: url(../images/man.jpg);
  background-repeat: no-repeat;
  background-size: 100px;
}
复制代码

    关于上述样式就再也不说明了，这时候我添加以下样式：

    background-origin: border-box;
复制代码

    能够看到背景图片起点由 padding-box 的左上角变为了 border-box 的左上角。

    如今加上 mask：

    -webkit-mask-image: url(../images/example.png);
-webkit-mask-size: 50px;
复制代码

    能够看出 mask 的默认值是 border-box。

    咱们将其改成 padding-box：

    -webkit-mask-origin: padding-box;
复制代码

    能够看到遮罩是由 padding-box 的左上角为原点开始平铺的。

  6. background-clip & mask-clip

    设置元素的背景或遮罩背景的绘制区域。

    background-clip: border-box（默认值）|padding-box|content-box|text;
-webkit-mask-clip: border-box（默认值）|padding-box|content-box|margin-box;
复制代码

    一样咱们重写一下样式：

    .container {
  width: 250px;
  height: 250px;
  font-size: 2rem;
  overflow: hidden;
  border: 10px solid rgba(255, 0, 0, 0.3);
  background-image: url(../images/man.jpg);
  background-size: 100px;
  background-origin: border-box;
  background-position: 0 0;
}
复制代码

    能够看到，在默认状况下，背景图片在 border 范围以内都进行了平铺。

    当咱们设置：

    background-clip: padding-box;
复制代码

    能够看到平铺范围被限定在了 padding 范围以内了。

    值得一提：background-clip：text

    <div class="container">Love You!</div>
复制代码
    .container {
  font-size: 5rem;
  font-weight: bolder;
  color: transparent;
  background-image: url(../images/scene.jpg);
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
}
复制代码

    这里用的背景：

    ages/scene.jpg)

    Love You! + scene.jpg = 以下：

  7. background-attachment & mask-attachment

    设置背景图像或者遮罩图像的位置是固定在 viewport 内，仍是与其容器一块儿滚动。

    background-attachment: scroll（默认值）|fixed|local;
mask-attachment: scroll（默认值）|fixed|local;
复制代码
    值 描述
    scroll 相对于元素自己固定， 而不是随着它的内容滚动。
    local 相对于元素的内容固定。若是一个元素拥有滚动机制，背景/遮罩将会随着元素的内容滚动， 而且背景/遮罩的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
    fixed 相对于视口固定。即便一个元素拥有滚动机制，背景/遮罩也不会随着元素的内容滚动。

    这里咱们着重介绍 background-attachment。

    background-attachment 是 CSS3 视差特效最棒的实现方法。这里推荐一下一位做者的文章写得很是棒！滚动视差？CSS 不在话下

    这里咱们也来实现一个炫技：

    想当作品：

    <div class="wrapper">
  <div class="container">
    <div class="div text">Love You!</div>
    <div class="div"></div>
    <div class="div text">Love Me!</div>
    <div class="div"></div>
    <div class="div text">Love life!</div>
  </div>
</div>
复制代码
    ::-webkit-scrollbar {
  display: none;
}
.container {
  width: 30rem;
  height: 8rem;
  overflow: scroll;
  border: 1px solid red;
}
.container > div {
  width: 30rem;
  height: 8rem;
  background-color: #ffffff;
  font-size: 5rem;
  font-weight: bolder;
  color: transparent;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.container :nth-child(1) {
  -webkit-background-clip: text;
  background-image: url(../images/scene-1.jpg);
}
.container :nth-child(2) {
  background-image: url(../images/scene-0.jpg);
}
.container :nth-child(3) {
  -webkit-background-clip: text;
  background-image: url(../images/scene-2.jpg);
}
.container :nth-child(4) {
  background-image: url(../images/scene-4.jpg);
}
.container :nth-child(5) {
  -webkit-background-clip: text;
  background-image: url(../images/scene-3.jpg);
}
复制代码

    这里咱们经过设置 background-attachment: fixed;让背景图片相对于窗口固定，而不会让背景图片随内容的滚动而滚动。

特性

background

  1. background-color

    给背景设置颜色。它的层级比背景图片还靠后，是盒模型的最底部！

    开发人员应当在给元素设定背景图的同时给元素指定背景色，当背景图不可用时背景色替代。

mask

  1. mask-composite（不作详细介绍）

    表示当同时使用多个图片进行遮罩时候的混合方式。

    这里只简单的介绍其中几个值：

    值 描述
    source-over 遮罩累加。
    source-in 重叠的位置是遮罩，不重叠的位置表现为透明。
    source-out 重叠的位置是不遮罩，表现为透明。

笔者专门在 github 上建立了一个仓库，用于记录平时学习全栈开发中的技巧、难点、易错点，欢迎你们点击下方连接浏览。若是以为还不错，就请给个小星星吧！👍

2019/04/05

AJie

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程