0

注: これは、以前のユーザーによって提起された問題と同じです (ただし、問題の解決策はありませんでした)。

localhost から Chrome で実行している Web ページの画像にクリップパスを適用すると、最初のオブジェクトでのみ機能します。残りのイメージ (オブジェクト) は完全に消えます。ただし、 jsfiddleを実行すると、同じコードが正常に機能します。CSSは次のとおりです。

.art1 > .pic1{
  width:60px;
  height:60px;
  float: left;
  shape-margin: 4px;
  shape-outside: circle(40% at 50% 50%);
  -webkit-clip-path: circle(40% at 50% 50%);
  margin-left: -1em; 
}

 .art2 > .pic2{
  width:60px;
  height:60px;
  float: left;
  shape-margin: 4px;
  shape-outside: circle(40% at 50% 50%);
  -webkit-clip-path: circle(40% at 50% 50%);
  margin-left: -1em; 

}

.art3  > .pic3{
  width:60px;
  height:60px;
  float: left;  
   shape-margin: 4px;
  shape-outside: circle(40% at 50% 50%);
  -webkit-clip-path: circle(40% at 50% 50%);
  margin-left: -1em; 
}

このjsfiddleは、私の Web ページで使用されているものとまったく同じコードを使用した問題のデモです。3 つの同一の div が表示され、円のクリップパスが 4 つの画像すべてで機能します。私は最初の提出者に彼の評価を尋ねた.

それでも、最新バージョンの Chrome を使用していますが、ローカルホストから実行すると問題が発生します。これを回避する方法はありますか？

4

1 に答える 1

0

この jfiddle を自分のシステムの Chrome、Firefox、および IE で再度試したところ、同じ問題が発生しました。モバイルで chrome を試したところ、うまくいきました。私の結論は、OS が原因で問題が発生する可能性が高いということです。ラップトップで Windows 7 を実行しています。

于 2016-02-09T07:27:14.557 に答える