2

所以我在让这个特定的剪辑路径在 Firefox 中正确显示时遇到了问题，我不太确定如何让它正常工作。到目前为止，它在 WebKit 浏览器中正确显示。

#banner {
  background-color: #FFFFFF;
  position: fixed;
  top: 0;
  width: 100%;
  height: 110px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 65%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 65%);
  overflow: hidden;
}
#header {
  width: 800px;
  margin: 20px auto 10px;
  overflow: hidden;
}
#content-wrapper {
  width: 800px;
  margin: auto;
  background-color: rgba(255, 255, 255, 0.80);
  overflow: hidden;
  padding: 100px 20px 20px;
}
#logo {
  position: fixed;
  border-collapse: collapse;
}
<div id="banner">
  <div id="header">
    <div id="logo">
      <a href="#" target="_blank">
        <img src="http://placehold.it/180x46" width="180" height="46" alt="Logo" />
      </a>
    </div>
  </div>
</div>
<div id="content-wrapper">
  Content wrapper
</div>

我敢肯定这真的很简单，但我一辈子都无法弄清楚我在这里缺少什么才能让它在 Firefox 中正确显示。

4

1 回答 1

2

为什么我的剪辑路径在 Firefox 中不起作用？

您的剪辑路径或使用模型没有任何问题。它在 Firefox 中不起作用，因为它还不支持 CSS 剪辑路径。Firefox 仅支持url()使用 SVG 剪辑路径的语法。

如何让它在 Firefox 中运行？

如果您希望剪辑路径在 Firefox 中工作，那么您必须将您的 CSS 剪辑路径转换为 ​​SVG 版本，如下面的片段并使用url()语法。正如您在代码片段中看到的那样，将 CSS 剪辑路径转换为其等效的 SVG 非常简单。您只需使用正确的标签并将所有百分比转换为比率。

（出于可见性目的，我已将颜色从白色更改为黄绿色。）

#banner {
  background-color: yellowgreen;
  position: fixed;
  top: 0;
  width: 100%;
  height: 110px;
  -webkit-clip-path: url(#banner-clip);
  clip-path: url(#banner-clip);
  overflow: hidden;
}

#header {
  width: 800px;
  margin: 20px auto 10px;
  overflow: hidden;
}

#content-wrapper {
  width: 800px;
  margin: auto;
  background-color: rgba(255, 255, 255, 0.80);
  overflow: hidden;
  padding: 100px 20px 20px;
}

#logo {
  position: fixed;
  border-collapse: collapse;
}
<!-- The SVG is for the clip-path -->
<svg width="0" height="0">
  <defs>
    <clipPath id="banner-clip" clipPathUnits="objectBoundingBox">
      <polygon points="0 0, 1 0, 1 1, 0 .65" />
    </clipPath>
  </defs>
</svg>

<div id="banner">
  <div id="header">
    <div id="logo">
      <a href="#" target="_blank"><img src="http://placehold.it/180x46" width="180" height="46" alt="Logo" /></a>
    </div>
  </div>
</div>
<div id="content-wrapper">
  Content wrapper
</div>

上面的demo在IE中能用吗？如果没有，如何使它工作？

上面的演示仍然无法在 IE 中运行，因为它完全不支持clip-path. 如果您还需要 IE 支持，那么您应该取消clip-path并直接使用 SVG。下面的代码片段有一个演示。

这里所做的是我们使用 SVG 的path元素创建一个路径（梯形），为其提供所需的填充（背景颜色），然后将其绝对定位在.header. 形状短于图像（但不是图像）。

#banner {
  position: fixed;
  top: 0;
  width: 100%;
  height: 110px;
  overflow: hidden;
}
#banner svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
#banner svg polygon{
  fill: yellowgreen;
}
#header {
  width: 800px;
  margin: 20px auto 10px;
  overflow: hidden;
}
#content-wrapper {
  width: 800px;
  margin: auto;
  background-color: rgba(255, 255, 255, 0.80);
  overflow: hidden;
  padding: 100px 20px 20px;
}
#logo {
  position: fixed;
  border-collapse: collapse;
}
<div id="banner">
  <svg viewBox='0 0 1 1' preserveAspectRatio='none'>
    <polygon points="0 0, 1 0, 1 1, 0 .65" />
  </svg>
  <div id="header">
    <div id="logo">
      <a href="#" target="_blank">
        <img src="http://placehold.it/180x46" width="180" height="46" alt="Logo" />
      </a>
    </div>
  </div>
</div>
<div id="content-wrapper">
  Content wrapper
</div>

有用的链接：

于 2016-03-12T05:31:56.933 回答