無法縮放背景div圖像
[英]Cannot scale background div image
問題描述
無論出於何種原因，無論如何我都無法手動縮放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>
2 個解決方案
解決方案1
1 已采納 2013-04-30 06:28:31
根據我的知識，我們無法縮放背景圖片
如果您的圖片尺寸大於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元素會更好。 如果將背景圖像更改為所需的大小，則查看示例效果會更好。
有關設置背景位置正確的背景位置的更多詳細信息，請參見此內容
如果您想了解有關背景圖像位置的更多信息以及如何在網絡上常用它們，請嘗試閱讀有關圖像精靈的信息。
解決方案2
0 2013-04-30 06:03:14
我猜您正在處理此圖像：img / Stage-Background.png
而不是背景尺寸，請使用px中的height和width參數。
另外，如果您可以告訴我們圖像的原始大小是多少，以及DIV希望保留的大小。
縮放 div 以適合背景圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.