CSS Coffee | The daily sip of CSS

生成你自己的 Playground

输入任意 CSS 属性，即时获得一个可交互的实时示例。

mask-position

.masked-box { width: 300px; height: 200px; background-color: #3498db; mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="50" fill="white"/></svg>'); mask-position: 100px 0; mask-size: 100px 100px; -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="50" fill="white"/></svg>'); -webkit-mask-position: 100px 0; -webkit-mask-size: 100px 100px; }}

CSS 中的 'mask-position' 属性用于指定遮罩图像在元素上的位置。它允许你控制遮罩的应用位置，这可以通过根据遮罩的位置揭示或隐藏元素的部分内容，从而创造出有趣的视觉效果。

mask-origin

.container { width: 300px; height: 300px; position: relative; overflow: hidden; }
.masked { width: 100%; height: 100%; background-color: lightblue; mask-image: radial-gradient(circle, black 50%, transparent 51%); mask-origin: center; mask-size: 200%; }

CSS中的'mask-origin'属性定义了遮罩图像相对于应用该属性的元素的位置。它确定了用于遮罩的坐标系统，从而更好地控制遮罩效果的渲染。当创建复杂的视觉效果时，尤其是涉及形状和图像时，这个属性非常有用。

mask-mode

.mask-demo { width: 300px; height: 300px; background-color: #4CAF50; mask-image: radial-gradient(circle, white 50%, transparent 50%); mask-mode: alpha; -webkit-mask-mode: alpha; }

'mask-mode' CSS 属性定义了遮罩图像如何应用于一个元素。它决定了遮罩图像是作为透明度的来源还是不透明度的来源，从而允许对元素的视觉显示或隐藏进行创意控制。这个属性在图形设计和网页动画中尤其有用。

mask-image

.masked-box { width: 300px; height: 300px; background-color: #3498db; -webkit-mask-image: url('https://via.placeholder.com/300/ffffff/000000?text=Mask'); mask-image: url('https://via.placeholder.com/300/ffffff/000000?text=Mask'); mask-size: cover; }

'mask-image' CSS 属性允许您指定一张图像作为元素的遮罩，根据图像的像素值控制元素的可见性。图像中不透明的区域将显示元素，而透明的区域则会隐藏它。这个属性特别适合用于创建复杂的形状和效果，而无需操作 HTML 结构。

mask-composite

.container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: lightblue;
  overflow: hidden;
}

.mask1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.5);
  -webkit-mask-image: radial-gradient(circle, black 50%, transparent 51%);
  mask-image: radial-gradient(circle, black 50%, transparent 51%);
}

.mask2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 255, 0.5);
  -webkit-mask-image: radial-gradient(circle, black 50%, transparent 51%);
  mask-image: radial-gradient(circle, black 50%, transparent 51%);
  mask-composite: exclude;
}

CSS 中的 'mask-composite' 属性允许你控制多个遮罩层在应用于元素时的组合方式。它通过确定遮罩之间的交互方式来实现复杂的视觉效果，例如它们是应该相加、相减还是相交。这个属性在创建复杂的网页图形设计和效果时特别有用。

Learn CSS daily

生成你自己的 Playground