css 遮罩层随着滚动遮罩_网页设计：使用CSS剪切和遮罩

最新推荐文章于 2022-05-12 21:48:18 发布

cune1359

最新推荐文章于 2022-05-12 21:48:18 发布

阅读量760

点赞数

文章标签： css html js javascript java ViewUI

图像编辑中的遮罩是一种基于另一个对象“隐藏”对象的一部分的方法。这种方法在Photoshop等图像编辑器中早就可用。具有某些属性CSS也可以使用类似的方法。

但是在继续之前，让我们先看看如何在Photoshop中实现这种效果，然后您将看到我们如何使用CSS来模仿类似的效果。

观看演示

在Photoshop中

在Photoshop中，我们至少需要有两个对象用于“遮罩”。之后，我们只需按住Alt键（Win）或Option键（Mac），然后将鼠标指针放在这两个对象的层之间即可（请参见屏幕截图）。

在此示例中，我们将一个圆形裁剪为一个矩形。

遮罩也可以应用于其他类型的层。在此示例中，我们将图像蒙版为文本。

因此，问题是，我们可以在网络上应用类似的东西吗？简而言之，是的，我们可以。让我们看看它是如何完成的。

在CSS中

CSS中有一些属性可用于在Web上重新创建类似的效果，它们是“ overflow”，“ clip”和新CSS3属性background-clip ：

溢出

overflow属性定义了超出CSS盒子模型的区域。在下面的示例中，我们在Photoshop中重新创建我们的第一个示例。

关于HTML标记，我们将有两个div ，形成圆形和矩形，我们把div的内圆div像这样的矩形;

<div class="rect">
	<div class="circle"> </div>
</div>

然后，对它进行一些样式设置，然后将圆稍微移出右侧矩形。

.rect {
	width: 200px;
	height: 200px;
	background-color: #eaeaea;
}
.circle {
	width: 200px;
	height: 200px;
	border-radius: 100px;
	background-color: #601785;
	position: relative;
	left: 100px;
}

至此，我们将得到以下结果：

现在，要隐藏超出矩形区域的部分，我们只需将overflow属性声明为隐藏在矩形上，就像这样；

.rect {
	width: 200px;
	height: 200px;
	background-color: #eaeaea;
        overflow: hidden;}

我们去了；我们完成与Photoshop方法相同的结果。

夹

另一种方法是使用clip属性。自CSS2以来，该属性就一直存在，因此我们可以放心地确保旧浏览器支持该属性。由于我们将使用clip属性，因此不需要矩形div 。因此，我们的标记将只是圆圈，如下所示。

<div class="circle"> </div>

使用相同的样式，将此div形成一个圆圈。然后，我们使用clip属性隐藏该圆圈的一半。目前， clip属性仅支持rect()函数；它包含四个定义矩形坐标的值，描述如下rect(top, right, bottom, left) 。

最后，为了使clip属性能够隐藏元素，我们需要将元素的位置定义为absolute 。

.circle {
	width: 200px;
	height: 200px;
	border-radius: 100px;
	background-color: #601785;
	position: absolute;
	left: 100px;
	clip: rect(0px,100px,200px,0px);
}

此代码将导致以下结果。不幸的是，由于我们通过rect()函数定义了矩形，因此我们无法为其添加背景色，但是存在遮罩元素的想法。

背景剪辑

最近，CSS3具有一个名为background-clip的新属性，它确定背景绘画区域。使用此属性，我们可以将范围限制为应用背景的范围。

此属性的完整语法为： background-clip: border-box|padding-box|content-box; 。

但是，Webkit浏览器在这一领域又迈进了一步，它还添加了text值，这使得可以将文本用作掩码。在下面的示例中，我们想从我们的Photoshop示例中重新创建第二个遮罩效果。首先，我们像这样添加文本；

<h1>Galaxy</h1>

然后，在样式表中，将background-image添加到此文本中，并声明background-clip 。要使背景看起来很漂亮，我们还需要使用RGBA颜色模式减少文本中的颜色填充。

h1 {
	font-family: Arial;
	font-size: 5em;
	text-align: center;

	background-image: url(Galaxy.jpg);

	-webkit-background-clip: text;
	background-clip: text;

	color: rgba(0,0,0,0);
}

上面的代码将为我们提供以下文本效果。