Question

我试图将图像遮罩到背景中，因此它不会重叠但不确定如何进行。我尝试了背景剪辑框/填充，但它没有用。

我尝试使用clip：rect（）;除非我做错了，否则它什么都不做。

 <div class="paralax">
        <div class="fast"></div>
        <div class="medium"></div>
        <div class="slow"></div>
    </div>

.paralax{
width: 100%;
height: 306px;
background: #ccc;
position: relative;
display: block;
clear: both;
}

.fast{
    background: url(http://s13.postimg.org/v7rm6cidj/fast.png);
    width: 100%;
    height: 193px;
}
.medium{
    background: url(http://s7.postimg.org/ae6yxfd4b/medium.png);
    width: 100%;
    height: 510px;
    clip: rect(0px, 0px, 100px, 0px);
}

Answer 1

您需要在对象上设置absolute或fixed定位，然后展开rect的左侧（第二个位置），如下所示：

＆＃13;

.parallax {
  width: 100%;
  height: 306px;
  background: #ccc;
  position: relative;
  display: block;
  clear: both;
}
.medium {
  background: url(http://s7.postimg.org/ae6yxfd4b/medium.png);
  position: absolute;
  width: 100%;
  height: 510px;
  clip: rect(0px, 1025px, 100px, 0px);
}

＆＃13;

<div class="parallax">
  <div class="medium"></div>
</div>

＆＃13;

注意：clip已弃用（但仍可在许多浏览器中使用），而clip-path替换它可能无法在所有浏览器中使用。

另外，要指定rect参数：它们是距离左上角的距离，但是值以“上”，“右”，“下”，“左”的顺序指定。不是很直观，有几个网站无法正确记录这一点。

用于视差效果的css剪辑遮罩

1 个答案: