口罩

口罩-Bootstrap 5和Material Design 2.0

遮罩通过部分或完全隐藏元素来更改元素的可见性。口罩是 通过提供适当的对比度使内容更可见。它们最常用于 图片。

Without mask

Sample

Can you see me?

With mask

Sample

Can you see me?


基本例子

蒙版用法的一个简单示例。


          <div class="bg-image">
            <img src="https://mdbootstrap.com/img/new/standard/city/053.webp" class="w-100" />
            <div class="mask" style="background-color: rgba(0, 0, 0, 0.6)"></div>
          </div>
        

这个怎么运作

掩码如何在MDB中工作的详细说明:

  • 遮罩需要 .bg-image 包装器,该包装器将位置设置为相对,溢出到 隐藏并正确居中图像。
  • 内部的 .bg-image 包装器是我们放置的第一个孩子 带有源链接的 img 元素
  • 下面是实际的蒙版。我们通过设置颜色和不透明度 rgba 代码和内联CSS。在里面section, y你会找到一个 RGBA颜色如何与遮罩配合使用的详细说明
  • 如果要在图像上放置文本,则必须将其放在.mask包装器中。至 居中,您必须使用flex实用程序(在 section 下面)。

ba

通过操纵RGBA代码,您可以更改蒙版的颜色和不透明度。

颜色

rgba(18, 102, 241, 0.6)
rgba(178, 60, 253, 0.6)
rgba(0, 183, 74, 0.6)
rgba(249, 49, 84, 0.6)
rgba(251, 251, 251, 0.6)
rgba(57, 192, 237, 0.6)

您甚至可以将花式渐变设置为蒙版。

rgba(57, 192, 237, 0.6)

            <div class="bg-image">
              <img src="https://mdbootstrap.com/img/new/standard/city/053.webp" class="w-100" />
              <div
                class="mask"
                style="
                  background: linear-gradient(
                    45deg,
                    rgba(29, 236, 197, 0.7),
                    rgba(91, 14, 214, 0.7) 100%
                  );
                "
              ></div>
            </div>
          

不透明度

通过更改RGBA颜色的最后一个值,您可以控制蒙版的不透明度。

0.0表示完全透明,而1.0表示完全不透明。您可以在0.0到1.0之间设置任何值。

rgba(0,0,0,0.0)-完全透明

rgba(0,0,0,1.0)-完全不透明

0.1
0.3
0.55
0.7
0.8
0.9

内容

蒙版的主要目的是在图像和内容之间提供适当的对比度 放在上面。通常,我们在带有蒙版的图像上放置文本。

.mask 包装器中放置一个 div 并应用 flexbox实用程序以使内容居中 垂直和水平。然后将文字放入其中。

Sample

Can you see me?


          <div class="bg-image">
            <img
              src="https://mdbootstrap.com/img/new/standard/city/053.webp"
              class="w-100"
              alt="Sample"
            />
            <div class="mask" style="background-color: rgba(0, 0, 0, 0.6)">
              <div class="d-flex justify-content-center align-items-center h-100">
                <p class="text-white mb-0">Can you see me?</p>
              </div>
            </div>
          </div>
        

波纹

您可以轻松地向图像添加涟漪效果 戴着面具。

只需在 .bg-image 类旁边添加 .ripple 类。


          <!-- Default dark color ripple -->
          <div class="bg-image ripple">
            <img src="https://mdbootstrap.com/img/new/standard/city/053.webp" class="w-100" />
            <div class="mask" style="background-color: rgba(251, 251, 251, 0.6)"></div>
          </div>

          <!-- Light color ripple changed via data-mdb-attribute -->
          <div class="bg-image ripple" data-mdb-ripple-color="light">
            <img src="https://mdbootstrap.com/img/new/standard/city/053.webp" class="w-100" />
            <div class="mask" style="background-color: rgba(0, 0, 0, 0.6)"></div>
          </div>