CSS3 背景画像関連 互換性: IE9+ 背景クリップ 背景画像描画領域 background-clip:border-box; コンテンツ領域 <!DOCTYPE html> <html lang="ja" マニフェスト="index.manifest"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <スタイル> div{ 幅: 500ピクセル; 高さ: 500px; 背景:url(source/p3.jpg) 中央; パディング:50px; border:50px 透明; 背景クリップ:コンテンツボックス; /*背景クリップ:パディングボックス;*/ /*背景クリップ:境界線ボックス;*/ } </スタイル> </head> <本文> <div></div> </本文> </html> background-clip:padding-box; パディング領域 <!DOCTYPE html> <html lang="ja" マニフェスト="index.manifest"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <スタイル> div{ 幅: 500ピクセル; 高さ: 500px; 背景:url(source/p3.jpg) 中央; パディング:50px; border:50px 透明; 背景クリップ:パディングボックス; /*背景クリップ:境界線ボックス;*/ } </スタイル> </head> <本文> <div></div> </本文> </html> background-clip:border-box; 境界領域 <!DOCTYPE html> <html lang="ja" マニフェスト="index.manifest"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <スタイル> div{ 幅: 500ピクセル; 高さ: 500px; 背景:url(source/p3.jpg) 50px 50px 繰り返しなし; パディング:50px; border:50px 透明; 背景の原点:境界線ボックス; } </スタイル> </head> <本文> <div></div> </本文> </html> background-origin: content-box | padding-box | border-box; 背景画像の開始位置 背景画像は、境界ボックスから水平方向および垂直方向に 50 ピクセル下方にオフセットされます。 <!DOCTYPE html> <html lang="ja" マニフェスト="index.manifest"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <スタイル> div{ 幅: 500ピクセル; 高さ: 500px; 背景:url(source/p3.jpg) 50px 50px 繰り返しなし; パディング:50px; border:50px 透明; 背景の原点:パディングボックス; } </スタイル> </head> <本文> <div></div> </本文> </html> 背景画像はパディングボックスから水平方向および垂直方向に50ピクセル下方にオフセットされています。 <!DOCTYPE html> <html lang="ja" マニフェスト="index.manifest"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <スタイル> div{ 幅: 500ピクセル; 高さ: 500px; 背景:url(source/p3.jpg) 50px 50px 繰り返しなし; パディング:50px; border:50px 透明; 背景のオリジン:コンテンツボックス; } </スタイル> </head> <本文> <div></div> </本文> </html> 背景画像はコンテンツボックスから水平方向および垂直方向に50ピクセル下方にオフセットされています。 <!DOCTYPE html> <html lang="ja" マニフェスト="index.manifest"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <スタイル> div{ 幅: 500ピクセル; 高さ: 500px; 背景:url(source/p2.jpg) 50px 50px 繰り返しなし; background-size:100%;/*幅はコンテナの幅の100%、高さは画像に比例します*/ background-size:100% 100%;/*幅はコンテナの幅の100%、高さはコンテナの高さの100%です*/ 背景サイズ:カバー; 背景サイズ:contain; } </スタイル> </head> <本文> <div></div> </本文> </html> background-size: 数値またはパーセンテージを入力するときに、1つの値のみを入力すると、もう1つの値はデフォルトで自動に設定されます。 カバーは比例スケーリングでコンテナを埋めます 片側が容器の端に触れるまでスケールを均等に保持する <!DOCTYPE html> <html lang="ja" マニフェスト="index.manifest"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <スタイル> div{ 幅: 500ピクセル; 高さ: 500px; 背景:url(source/p2.jpg) 50px 50px 繰り返しなし; background-size:100%;/*幅はコンテナの幅の100%、高さは画像に比例します*/ background-size:100% 100%;/*幅はコンテナの幅の100%、高さはコンテナの高さの100%です*/ 背景サイズ:カバー; 背景サイズ:contain; } </スタイル> </head> <本文> <div></div> </本文> </html> 複数の背景画像
前の画像が次の画像を覆います。 <!DOCTYPE html> <html lang="ja" マニフェスト="index.manifest"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <スタイル> div{ 幅: 500ピクセル; 高さ: 500px; 背景画像:url(source/shuiyin.png), url(source/cat.jpg); } </スタイル> </head> <本文> <div></div> </本文> </html> 色を透明に設定: 透明 CSS3 グラデーション 互換性: IE10 <!DOCTYPE html> <html lang="ja" マニフェスト="index.manifest"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <スタイル> div{ 幅: 500ピクセル; 高さ: 500px; background:-webkit-linear-gradient(pink, orange, #abcdef);/*デフォルトは垂直です*/ background: -moz-linear-gradient(pink, orange, #abcdef);/*デフォルトは垂直です*/ 背景: -o-linear-gradient(pink, orange, #abcdef);/*デフォルトは垂直です*/ background: linear-gradient(pink, orange, #abcdef);/*デフォルトは垂直です*/ background:-webkit-linear-gradient(left, pink, orange, #abcdef);/*左から右へ*/ 背景: -moz-linear-gradient(right, pink, orange, #abcdef); 背景: -o-linear-gradient(right, pink, orange, #abcdef); 背景: linear-gradient(右へ、ピンク、オレンジ、#abcdef); background:-webkit-linear-gradient(left top, pink, orange, #abcdef);/*左上から右下へ*/ 背景: -moz-linear-gradient(右下、ピンク、オレンジ、#abcdef); 背景: -o-linear-gradient(右下、ピンク、オレンジ、#abcdef); 背景: 線形グラデーション(右下、ピンク、オレンジ、#abcdef); } </スタイル> </head> <本文> <div></div> </本文> </html> 通常の線形グラデーションの角度 Webkitカーネルでの線形グラデーションの角度 解決策: 互換性のあるブラウザのプレフィックスが順に記述され、プレフィックスのないブラウザは通常最後に配置されます。 色を特定の位置に割り当てることができる 最初の色が指定されていない場合は、デフォルトで 0% になります。最後の色はデフォルトで 100% になります。 <!DOCTYPE html> <html lang="ja" マニフェスト="index.manifest"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <スタイル> div{ 幅: 500ピクセル; 高さ: 500px; background:-webkit-linear-gradient(45deg, pink, orange, #abcdef);/*特定の角度の表現*/ 背景: -moz-linear-gradient(45deg, ピンク, オレンジ, #abcdef); 背景: -o-linear-gradient(45deg, ピンク, オレンジ, #abcdef); 背景: linear-gradient(45deg, pink, orange, #abcdef); background:-webkit-linear-gradient(90deg, オレンジ, ピンク 30%, 紫 70%, #abcdef); 背景: -moz-linear-gradient(90deg, オレンジ, ピンク 30%, 紫 70%, #abcdef); 背景: -o-linear-gradient(90deg, オレンジ, ピンク 30%, 紫 70%, #abcdef); 背景: linear-gradient(90度、オレンジ、ピンク30%、紫70%、#abcdef); } </スタイル> </head> <本文> <div></div> </本文> </html> rgba() は透明色のグラデーションを設定できます <!DOCTYPE html> <html lang="ja" マニフェスト="index.manifest"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <スタイル> div{ 幅: 500ピクセル; 高さ: 500px; background:-webkit-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));/*特定の角度の表現*/ 背景: -moz-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1)); 背景: -o-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1)); 背景: linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1)); } </スタイル> </head> <本文> <div></div> </本文> </html> 繰り返しグラデーション 繰り返し線形グラデーション <!DOCTYPE html> <html lang="ja" マニフェスト="index.manifest"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <スタイル> div{ 幅: 500ピクセル; 高さ: 500px; 背景:-webkit-repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%); 背景: -moz-repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%); 背景: -o-repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%); 背景: repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%); } </スタイル> </head> <本文> <div></div> </本文> </html> 放射状グラデーション <!DOCTYPE html> <html lang="ja" マニフェスト="index.manifest"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <スタイル> div{ 幅: 400ピクセル; 高さ: 200px; 境界線の半径:50%; 背景:-webkit-radial-gradient(ピンク、#abcdef); 背景: -moz-radial-gradient(ピンク、#abcdef); 背景: -o-radial-gradient(ピンク、#abcdef); 背景: 放射状グラデーション(ピンク、#abcdef); } </スタイル> </head> <本文> <div></div> </本文> </html> 円形グラデーションを維持する <!DOCTYPE html> <html lang="ja" マニフェスト="index.manifest"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <スタイル> div{ 幅: 400ピクセル; 高さ: 200px; 境界線の半径:50%; 背景:-webkit-radial-gradient(円、ピンク、#abcdef); 背景: -moz-radial-gradient(circle, pink, #abcdef); 背景: -o-radial-gradient(円、ピンク、#abcdef); 背景: 放射状グラデーション(円、ピンク、#abcdef); } </スタイル> </head> <本文> <div></div> </本文> </html> サイズ 最も近い側 最も近い角 最も遠い側 最も遠い角 <!DOCTYPE html> <html lang="ja" マニフェスト="index.manifest"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <スタイル> div{ 幅: 200ピクセル; 高さ: 100px; 境界線の半径:50%; 下マージン:50px; 行の高さ: 100px; テキスト配置: 中央; /* background:-webkit-radial-gradient(circle, pink, #abcdef); 背景: -moz-radial-gradient(circle, pink, #abcdef); 背景: -o-radial-gradient(円、ピンク、#abcdef); 背景: 放射状グラデーション(円、ピンク、#abcdef);*/ } div:n番目の子(1){ background:-webkit-radial-gradient(closest-side 円、ピンク、#abcdef); 背景: -moz-radial-gradient(closest-side circle, pink, #abcdef); 背景: -o-radial-gradient(最も近い円、ピンク、#abcdef); 背景: 放射状グラデーション(最も近い円、ピンク、#abcdef); } div:n番目の子(2){ background:-webkit-radial-gradient(最も近い角の円、ピンク、#abcdef); 背景: -moz-radial-gradient(最も近い角の円、ピンク、#abcdef); 背景: -o-radial-gradient(最も近い角の円、ピンク、#abcdef); 背景: 放射状グラデーション(最も近い角の円、ピンク、#abcdef); } div:n番目の子(3){ background:-webkit-radial-gradient(最も遠い側の円、ピンク、#abcdef); 背景: -moz-radial-gradient(最も遠い側の円、ピンク、#abcdef); 背景: -o-radial-gradient(最も遠い側の円、ピンク、#abcdef); 背景: 放射状グラデーション(最も遠い側の円、ピンク、#abcdef); } div:n番目の子(4){ background:-webkit-radial-gradient(最隅の円、ピンク、#abcdef); 背景: -moz-radial-gradient(最隅の円、ピンク、#abcdef); 背景: -o-radial-gradient(最隅の円、ピンク、#abcdef); 背景: 放射状グラデーション(最隅の円、ピンク、#abcdef); } </スタイル> </head> <本文> <div>最も近い側</div> <div>最も近いコーナー</div> <div>一番遠い側</div> <div>一番遠い角</div> </本文> </html> グラデーションの中心位置を設定する 水平方向に幅の10%、垂直方向に高さの20% <!DOCTYPE html> <html lang="ja" マニフェスト="index.manifest"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <スタイル> div{ 幅: 200ピクセル; 高さ: 100px; 下マージン:50px; 行の高さ: 100px; テキスト配置: 中央; /* background:-webkit-radial-gradient(circle, pink, #abcdef); 背景: -moz-radial-gradient(circle, pink, #abcdef); 背景: -o-radial-gradient(円、ピンク、#abcdef); 背景: 放射状グラデーション(円、ピンク、#abcdef);*/ } div:n番目の子(1){ background:-webkit-radial-gradient(10% 20%, closet-side circle, pink, #abcdef); 背景: -moz-radial-gradient(10% 20%, 最も近い側の円, ピンク, #abcdef); 背景: -o-radial-gradient(10% 20%, 最も近い側の円, ピンク, #abcdef); 背景: 放射状グラデーション(10% 20%、最も近い側の円、ピンク、#abcdef); } div:n番目の子(2){ background:-webkit-radial-gradient(10% 20%, 最も近い角の円, ピンク, #abcdef); 背景: -moz-radial-gradient(10% 20%, 最も近い角の円, ピンク, #abcdef); 背景: -o-radial-gradient(10% 20%, 最も近い角の円, ピンク, #abcdef); 背景: 放射状グラデーション(10% 20%、最も近い角の円、ピンク、#abcdef); } div:n番目の子(3){ background:-webkit-radial-gradient(10% 20%, 最も遠い側の円, ピンク, #abcdef); 背景: -moz-radial-gradient(10% 20%, 最も遠い側の円, ピンク, #abcdef); 背景: -o-radial-gradient(10% 20%, 最も遠い側の円, ピンク, #abcdef); 背景: 放射状グラデーション(10% 20%、最も遠い側の円、ピンク、#abcdef); } div:n番目の子(4){ background:-webkit-radial-gradient(10% 20%、最端の円、ピンク、#abcdef); 背景: -moz-radial-gradient(10% 20%, 最端の円, ピンク, #abcdef); 背景: -o-radial-gradient(10% 20%, 最端の円, ピンク, #abcdef); 背景: 放射状グラデーション(10% 20%、最隅の円、ピンク、#abcdef); } </スタイル> </head> <本文> <div>最も近い側</div> <div>最も近いコーナー</div> <div>一番遠い側</div> <div>一番遠い角</div> </本文> </html> repeating-radial-gradient 放射状グラデーションの繰り返し <!DOCTYPE html> <html lang="ja" マニフェスト="index.manifest"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <スタイル> div{ 幅: 200ピクセル; 高さ: 100px; 下マージン:50px; 行の高さ: 100px; テキスト配置: 中央; 背景:-webkit-repeating-radial-gradient(円、ピンク、#abcdef 20%); 背景: -moz-repeating-radial-gradient(circle, pink, #abcdef 20%); 背景: -o-repeating-radial-gradient(circle, pink, #abcdef 20%); 背景: repeating-radial-gradient(円、ピンク、#abcdef 20%); } </スタイル> </head> <本文> <div></div> </本文> </html> IEブラウザのグラデーション IE10+はグラデーションをサポート IE6-8 フィルター使用 <!DOCTYPE html> <html lang="ja" マニフェスト="index.manifest"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <スタイル> div{ 幅: 200ピクセル; 高さ: 100px; 下マージン:50px; 行の高さ: 100px; テキスト配置: 中央; 背景:-webkit-repeating-radial-gradient(円、ピンク、#abcdef 20%); 背景: -moz-repeating-radial-gradient(circle, pink, #abcdef 20%); 背景: -o-repeating-radial-gradient(円、ピンク、#abcdef 20%); 背景: repeating-radial-gradient(円、ピンク、#abcdef 20%); フィルター: progid:DXImageTransform.Microsoft.gradient(startcolorstr=pink,endcolorstr=#abcdef,gradientType=1); } </スタイル> </head> <本文> <div></div> </本文> </html> IEコンソールを使用してIEブラウザのバージョンを切り替える IE フィルター 0 左から右への線形グラデーション 1 上から下への線形グラデーション 実際の事例: <!DOCTYPE html> <html lang="ja" マニフェスト="index.manifest"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <スタイル> div{ 幅: 600ピクセル; 高さ: 300px; 背景色:#abcdef; 背景サイズ:100px 100px; 背景画像:-webkit-linear-gradient(45度、ピンク25%、透明25%)、 -webkit-linear-gradient(-45度、ピンク25%、透明25%)、 -webkit-linear-gradient(45度、透明75%、ピンク75%)、 -webkit-linear-gradient(-45度、透明75%、ピンク75%); 背景画像:-moz-linear-gradient(45度、ピンク25%、透明25%)、 -moz-linear-gradient(-45度、ピンク25%、透明25%)、 -moz-linear-gradient(45度、透明75%、ピンク75%)、 -moz-linear-gradient(-45度、透明75%、ピンク75%); 背景画像:-o-線形グラデーション(45度、ピンク25%、透明25%)、 -o-線形グラデーション(-45度、ピンク25%、透明25%)、 -o-線形グラデーション(45度、透明75%、ピンク75%)、 -o-linear-gradient(-45度、透明75%、ピンク75%); 背景画像:線形グラデーション(45度、ピンク25%、透明25%)、 線形グラデーション(-45度、ピンク25%、透明25%)、 線形グラデーション(45度、透明75%、ピンク75%) linear-gradient(-45度、透明75%、ピンク75%); } </スタイル> </head> <本文> <div></div> </本文> </html> |
<<: ウェブデザイナーもウェブコーディングを学ぶ必要がある
居住地を選択するためのドロップダウンボックスをjQueryで実装するための具体的なコードは参考までに...
必要Windows システムでも Linux システムでも、さまざまな理由でパスワードを忘れてしまう...
Web 開発の世界では、フレームワークは非常に一般的です。新しいフレームワークやテンプレートが毎日の...
目次font-faceでフォントを正しく宣言するフォントをプリロードするフォントをホストするにはli...
1. MacにMySQLデータベースをインストールする1. MySQLデータベースをダウンロードする...
この記事では、写真の自動再生効果を実現するためのJSの具体的なコードを参考までに紹介します。具体的な...
MySQL タイム ブラインド インジェクションの 5 つの遅延方法 (PWNHUB の予期しない解...
目次ディスク使用量の表示ディスク クリーンアップ (軽々しく使用しないでください)データの移行ディス...
calc は数値を計算するために使用される CSS 関数です。長さ、角度、時間などを計算できます。 ...
この記事の例では、簡単な計算機を実装するための小さなプログラムの具体的なコードを参考までに共有してい...
デバッグブランチプロジェクトの通常の開発中に、以前にリリースされたバージョンにバグがある場合がありま...
フロントエンド開発において、$ は jQuery の関数です。$ のパラメータが異なると、実装される...
この記事では、ネイティブ JS で実装されたデジタル時計エフェクトを紹介します。エフェクトは次のとお...
1. div css マウスの手の形は cursor:pointer; です。 2. HTML の相...
最近、実践的なトレーニング プロジェクトを実行する際に ssm フレームワークを使用しました。プロジ...