0

なんらかの理由で、divの背景画像を手動でスケーリングすることはできません。background-size と max-height,width は何の効果もありません。画像は私のスタイル タグを無視しています。divの背景画像をフォーマットできない理由を誰か説明してもらえますか? img/Stage-Background.png を 1600x1076 から 750x650 に縮小したい

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="SDL.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
</head>

<body>

<img src="img/SDL 4 Final Recompress.jpg" style="margin-left:auto; margin-right:auto; " />

<div style="background-image:url(img/Stage-Background.png); background-size:80px 60px;
background-repeat:no-repeat;">
<center>
<embed
src="http://blip.tv/play/AwGUv2w"
type="application/x-shockwave-flash" width="669"
height="500" allowscriptaccess="always"
allowfullscreen="true" style="margin-top:100px; margin-bottom:200px;">
</embed>
</center>
</div>

</body>
</html>
4

2 に答える 2

1

私の知る限り、背景画像を拡大縮小することはできません

画像のサイズが div のサイズより大きい場合

<div style="width:400px; height:400px;background:url(xyz.png);"></div>

xyz.png の寸法が div の幅と高さよりも大きい。

以下を使用できます。

background-position:center;

それ以外の場合は、通常の img タグを使用してから、絶対配置を使用して要素を画像の上に配置します。

<div class="your_box_element" style="width:400px;height:400px;position:relative;">
    <img width="400px" height="400px" />
    <div class="your_text_on_top_of image" style="position:absolute;top:0px; left:0px;">
           Your text and other elements go here
    </div>
</div>

より大きなサイズの画像をロードしてからスケーリングする方法では、パフォーマンスが向上しないため、背景として使用する場合は、画像を div 要素に合わせて適切にスケーリングすることをお勧めします。背景画像を必要なサイズに変更すると、例が見やすくなります。

背景位置の詳細については、これを参照してくださいbackground-positionを正しく設定する

背景画像の位置と、それらが Web でどのように一般的に使用されているかについて詳しく知りたい場合は、Image Spritesについて読んでみてください。

于 2013-04-30T06:28:31.900 に答える