前回の記事では、タイトルの背景に上下のグラデーションのある画像を使用し、角丸効果を加えました。このような角の丸いフレームは比較的単調な写真にしか使えないって本当ですか？色彩豊かな絵も透明感や丸みを帯びたものにできないでしょうか？
答えは「はい」です。その究極のカンフーを見てみましょう。
まずは最終的なレンダリングを見てみましょう。
ご覧のとおり、これは純粋な CSS で実現された丸い画像であり、透明効果を確認するために特別に背景画像を適用しました。このモデルをコンピュータにダウンロードして、外側のフィレットが適切かどうかを確認してください。透明。
この効果を使用すると、各画像の角を丸めることを気にする必要がなくなります。この効果は一部の画像ベースのデモ ページでよく見られ、特に画像が多いリストに適しています。どうですか、効果は悪くないですよ！
さて、その実装メカニズムを見てみましょう!
実装原則:
このエフェクトは実際には第 2 章で実装したバリアントです。主なキー コードについて話しましょう。
主な変更点は背景画像の位置ですが、今回は第 2 章のものとは少し異なります。今回は、以下の 2 つの丸い角の変更を考慮する必要があります。
まず、上記の 2 つの丸い角の実装を見てみましょう。
/*画像のオフセット配置 - 上部*/
.sharp b.b2{背景位置:-4px 上;}
.sharp b.b3{背景位置:-2px -1px;}
.sharp b.b4{背景位置:-1px -2px;}
下の 2 つの丸い角のスタイル設定を見てください。下部と上部は互いに対応しています。
/*画像のオフセット配置 -- 下部*/
.sharp b.b7{背景位置:-4px 下;}
.sharp b.b6{背景位置:-2px 下;}
.sharp b.b5{背景位置:-1px 下;}
さまざまな画像呼び出しスタイル:
/*配色 1、グリーン スタイル ---------------------------------------------------*/
/*枠線の色*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,
.color1 .b7,.color1 .content{ボーダーカラー:#262626;}
.color1 .b1,.color1 .b8{背景:#262626;}
/*画像パス*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:url(image/1.jpg) no -繰り返す;}
最初の 2 つの文は一緒になって境界ボックスの色の値を形成します。これは同じ色の値に設定する必要があります。次の文は画像の呼び出しパスを設定します。
わずか 3 文で配色を取得できます。