HTML 5背景画像適応画面サイズ
1076 ワード
日常の开放の中で、いつも背景のピクチャーがある时に出会って、今异なっているスクリーンの大きさの携帯电话はまた多くて、どのように背景のピクチャーをスクリーンの大きさに适応させました.
ネットでいろいろな方法を探しましたが、問題を解決できるとは限らないものもあります.以下の方法は、私がよく使う方法で、htmlコードは以下の通りです.
CSSコードは以下の通りです.
この方法の最大の問題は、その後の内容で属性z-indexを設定する必要があることである.そうでなければ、その後の内容は背景図ではなく画像の後になります.
最も簡単な方法は次のとおりです.
bodyに属性background-size:100%を設定するだけで、この方法にも欠点があります.
PSは昨日同僚と交流した後、background-sizeをcontainに設定したほうが適切です.
ネットでいろいろな方法を探しましたが、問題を解決できるとは限らないものもあります.以下の方法は、私がよく使う方法で、htmlコードは以下の通りです.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<article class="wrap">
<header>
<div class="bg-img">
<img src="img/bg.png" >
</div>
</header>
</article>
</body>
</html>CSSコードは以下の通りです.
.wrap {
position: relative;
width: 100%;
height: 100%;
font-size: 0;
}
.bg-img img{
width: 100%;
}この方法の最大の問題は、その後の内容で属性z-indexを設定する必要があることである.そうでなければ、その後の内容は背景図ではなく画像の後になります.
最も簡単な方法は次のとおりです.
<body style="background-image: url(img/bg.jpg); background-size: 100%;">
</body>bodyに属性background-size:100%を設定するだけで、この方法にも欠点があります.
PSは昨日同僚と交流した後、background-sizeをcontainに設定したほうが適切です.