html - 背景画像を作成して、含まれる要素に合わせてサイズを調整するにはどうすればよいですか?

Question

このサイトのメインタブの丸みを帯びた角を確認してください。これらは幅 440 ピクセルの背景画像ですが、丸みを帯びたエッジを失うことなく、含まれる要素に合わせて調整されます。

score 7 · Accepted Answer

リスト項目とアンカーの両方が同じ背景画像を持っているように見えますが、オフセットが異なります。

画像は、これらの各要素の背景として設定されます。アンカーは画像の一番左の部分を表示するように設定され、リスト項目は右端の部分に設定され、右のパディングは画像が透けて見えるのに十分な幅です。この技術は引き戸として知られています。他の回答から収集されたリンクは次のとおりです。

MariuzとDarko Zに感謝します。

score 2 · Accepted Answer

彼らは「引き戸」として知られている技術を使用しています。詳細については、A List Apart を参照してください。

score 1 · Accepted Answer

ネット上には角を丸くするチュートリアルがいくつかあります。

CSS2 を使用すると、次のことを試すことができます。 CSS2 チュートリアル

CSS3を使いたい場合： CSS3チュートリアル

丸みを帯びた角を Google で簡単に検索すると、多くの役立つチュートリアルが表示されます。

score 0 · Accepted Answer

周辺に関連するだけかもしれませんが、大きな画像のサイズをより実用的なサイズに変更することをブラウザーに任せないように注意する必要があります。

ブラウザーによって縮小されるだけの場合、ページを大きな画像で埋める必要はありません。

4 に答える 4