CSSでの背景画像例を詳しく解説

ボディの背景画像設定

タイプ 1: この場合、背景画像は拡大縮小できますが、完全に比例させることはできません

background: url(imgs/1.jpg)no-repeat;

background-position:center0; 背景画像の位置原点は体の高さにより不確かです

background-attachment: 固定; 背景 画像は固定されたままで、ページがスクロールしてもスクロールしません

2 番目: この場合、背景画像はウィンドウ サイズの変化に応じて完全に拡大縮小されます

HTML の高さ:100%;

本文を設定

background: url(imgs/1.jpg) no-repeat;

background-size: 100% 1 00 % ; 背景サイズの値が cover の場合、片側がウィンドウの端に触れている限り停止します

同様に、

本文の要素の幅と高さを 100% にしたい場合は、

最初の方法:

最初に HTML の高さを 100% に設定し、次に幅を設定します。要素の 100%;height:100%;

2 番目の方法: width/height を 100% に設定するときに、position:fixed も設定します。

ページで入力を使用したい場合は、次のようにする必要があります。デフォルトの輪郭と境界線を削除すると、後で JS が変更されるときに、最初の操作中にわずかなピクセル オフセットが表示されます。

linkrel=ショートカット アイコン" href="imgs/favicon.ico" /> この文を に置き、HTML ウェブページのタイトルにある中小のアイコンを変更します

HTML 内のテキストは縦方向に表示されます

テキスト オブジェクトの幅設定は下方向にのみ配置できます テキストの幅の距離により、テキストが 1 行に 2 文字を収めることは不可能になるため、テキストは自動的に配置されますラップ、垂直組版の要件を形成します

この時点で、CSS word-break:normal; に

word-wrap:break- を追加する必要があります。これらの 2 つの文は句読点と行の折り返しを実現します。 、同時に全体の垂直表示

writing-mode: オブジェクトの書き込み方向を設定します。値は 2 つあります。

1.lr-tb : 左から右、上から2. tb-rl: 上から下、右から左へ

コードを実行すると、IE は正常に表示されましたが、Firefox と Google Chrome はサポートされていませんでした。書き込みモード属性の使用はお勧めしません

以上がCSSでの背景画像例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。