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 で機能しないのはなぜですか?

クリップパスまたは使用モデルに問題はありません。CSS クリップパスがまだサポートされていないため、Firefox では機能しません。Firefox はurl()、SVG クリップパスを使用して機能する構文のみをサポートします。

Firefox で動作させるにはどうすればよいですか?

clip-path を Firefox で動作させたい場合は、以下のスニペットのように CSS の clip-path を 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>

上記のデモは IE で動作しますか? そうでない場合、それを機能させる方法は？

上記のデモは、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 に答える