ホームページ > ウェブフロントエンド > htmlチュートリアル > 背景画像の下と横を無限に伸ばす方法_html/css_WEB-ITnose

背景画像の下と横を無限に伸ばす方法_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:56:54
オリジナル
3112 人が閲覧しました

たとえば、フォームに彼の背景画像を設定しました。
次に、画像を繰り返すのではなく、底部が無限に広がることを期待して、テーブルの長さが背景画像よりも長くなります。
辺も無限に拡張できるといいですね

ご存知の方はテーブルコードとCSSコードも教えてください、よろしくお願いします。 。


ディスカッションへの返信 (解決策)

次のように試してみて、背景としてテーブルの後ろに写真を配置し、その写真を 100% に引き伸ばします。背景の写真は引き伸ばすことができないことを知っておく必要があります

<。 ;div width="800px;height:600px">

<テーブル幅="800px ;height:600px">
.....



#back {
width: 800px;
height: 600px;
z-index: -1;
Position : 絶対;
}
#back img {
width: 100%;
height: 100%;

お役に立てば幸いです。 。 。


次のようにして、背景としてテーブルの後ろに画像を配置し、画像を 100% に拡大できます。背景画像は拡大できないことを知っておく必要があります

<表幅="800px;高さ:600px">

.. ...

……

ありがとう、でもこれは私が望むものではありません、
この種の画像は変形するためです。
アイデアはあるけどCSSの書き方がわからない。


私の写真は底面と側面を同じ色で作成しています。
つまり、画像をテーブルの中央に配置します。
次に、背景画像の外側に背景色を設定する方法はありますか?
画像の下部の色を抽出し、背景色を背景画像の色と一致させます。
これにより、エッジが引き伸ばされていることがわかります。 。 。

CSSの書き方がわかりません、うまくいったらまた教えてください。


説明が明確ではありません~ サポートが必要な場合は、1157373706 まで追加してください

1 階の返信からの引用:

次のように試して、背景としてテーブルの後ろに写真を置き、ストレッチすることができます画像を 100% に拡大する場合、背景画像は拡大できないことに注意してください


.....


あなたのアイデアに従って、限りテーブル内で同時に背景色と背景画像を設定する(中央揃え、繰り返しなし)、または上記の方法に従って外側の div に背景色と背景画像を設定すると、希望する効果が得られますが、注意点が1つあります。画像が大きすぎると、小さすぎると奇妙に感じられます。 。 。

さて、下に新しい画像を入れて、引き伸ばして、z-index:-1 に設定します

次に、margin-top を負の数に設定します (笑)

さて、下に新しい画像を入れて、引き伸ばして、z を設定します-index :-1

次に、margin-top を負の数に設定します (笑)

これはやりすぎです。画像を直接処理したほうが良いでしょう (笑)

ポスターの意味は理解できますが、理解できません。実際、SOHU のホームページも 2 つの DIV で構成されており、上の DIV には背景画像があり、下の DIV には背景画像がありません。白い色が無限に広がっているように見えます。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート