0

私が何をする必要があるかを説明できることを願っています。説明については、添付の画像を参照してください。画像を見ると、1/2の月が透明に切り取られているのがわかります。画像は動的であり、ユーザーの解像度によってスクロールが異なるため、切り抜きのある画像を作成することはできません....私がやろうとしていることは次のとおりです。

左に高さ約 22 ピクセルの白い実線のバー (繰り返し x)、次にカットアウトされた半月の画像が中央に配置され、次に右に高さ約 22 ピクセルの別の白い実線のバー (繰り返し x)。中心とマージンを使用して正しい位置にカットアウトされた半月を簡単に取得できます...問題は、白い棒を取得することで、添付の写真のように見えます.

どんな助けでも大歓迎です！おそらく私はこれについてすべて間違っているので、より良い解決策がありますか？

ここに画像の説明を入力

4

1 に答える 1

1

このCSSでそれを行うことができます：

.test1 {
    background-image: radial-gradient(20px 10px ellipse at top, transparent 99%, white 100%);
    background-size: 100% 17px;
    background-repeat: no-repeat;    
}

白い背景の上に、中心に透明な楕円を作成します。

于 2013-07-11T21:34:00.063 に答える