2013-04-30 182 views
0

無論出於何種原因,無論如何我都無法手動縮放div的背景圖片。背景大小和最大高度,寬度都沒有任何影響。圖片忽略了我的風格標籤。有人可以解釋爲什麼我不能格式化div的背景圖片嗎?我想從1600x1076按比例縮小的IMG /舞臺Background.png下降到750x650無法縮放背景div圖片

<!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> 

回答

1

根據我的瞭解,我們不能如果圖像尺寸比格的更大規模的背景圖像

然後

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

比div的寬度xyz.png尺寸更大,高度。

您可以使用:

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設置正確的適合

如果您想了解更多的背景圖像位置以及它們是如何上常用的網絡嘗試閱讀Image Sprites

0

我猜你是在處理與此圖像:IMG /舞臺Background.png

取而代之的背景 - 尺寸,使用高度&寬度參數px。

此外,如果您可以告訴我們圖像的原始尺寸是多少,以及您希望爲DIV保留多少尺寸。

+0

這只是適用於一個磨砂到它。我想將img/Stage-Background.png從1600x1076縮小到750x650 – qaxf6auux 2013-04-30 06:13:47