无法缩放背景div图片

问题描述：

无论出于何种原因，无论如何我都无法手动缩放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>

答

根据我的了解，我们不能如果图像尺寸比格的更大规模的背景图像

然后

<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

答

我猜你是在处理与此图像：IMG /舞台Background.png

取而代之的背景 - 尺寸，使用高度&宽度参数px。

此外，如果您可以告诉我们图像的原始尺寸是多少，以及您希望为DIV保留多少尺寸。

这只是适用于一个磨砂到它。我想将img/Stage-Background.png从1600x1076缩小到750x650 – qaxf6auux 2013-04-30 06:13:47

无法缩放背景div图片

相关推荐