0

マークアップに画像があります:

<img src="http://img-url/img.jpg" />

これは私のCSSです：

img {
  clip-path: polygon(70% 0%, 60% 40%, 90% 90%, 0% 50%) fill-box;
}

パーツを外せば使えfill-boxます。それで、私はそれを間違った方法で使用していますか？MDN の構文は次のようです。

<clip-source> | [ <basic-shape> || <geometry-box> ] | none
where 
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

プロパティへのリンク: https://developer.mozilla.org/en/docs/Web/CSS/clip-path

私はそれを正しく使用していませんか？何を変更する必要がありますか?

4

3 に答える 3

2

基本的には、使用しようとしている機能をブラウザがまだサポートしていないことが原因です。

あなたが参照した MDN のドキュメントは優れていますが、ブラウザーのサポート状況については実際には説明していませんが、記事はまだ「実験的な技術」であるという警告で始まっています。

WebPlatform も参考になります。clip-path のドキュメントでは、 fill-box についても言及されていません。

また、同じブラウザー内であっても、クリッピングでサポートされている構文が、通常の HTML 要素と比較して SVG 内で異なることに気付くかもしれません。特に、fill と stroke は SVG プロパティであるため、HTML コンテキストでfill-boxorを使用stroke-boxしても意味がない場合があります。

これらのエッジケースの構文に対するブラウザーのサポートは、時間の経過とともに改善される可能性がありますが、現時点で私が提案できる最善のオプションは、現在のブラウザーで機能する構文に使用を減らすことです。

于 2016-05-21T16:04:48.023 に答える
1

正しい構文は

`img {
  クリップ パス: ポリゴン (70% 0%、60% 40%、90% 90%、0% 50%);
}`

また

`img {
  クリップパス: フィルボックス;
}`

fill-box はキーワード値であるためです。Webkit ベースのブラウザを使用している場合は、試してください

`img {
  -webkit-clip-path: 塗りつぶしボックス;
}`
于 2016-05-21T16:06:24.913 に答える
1

互換性チャートにアクセスすると、ベンダー プレフィックスが必要な場合があることがわかります。

Chrome または Firefox を使用している場合は、-web-kit-clip-path.

于 2016-05-21T16:18:29.717 に答える