无法缩放背景div图像

Question

For whatever reason I cannot manually scale the background image of a div no matter what do. 无论出于何种原因，无论如何我都无法手动缩放div的背景图像。 background-size and max-height,width have no effect whatsoever. background-size和max-height，width都不起作用。 The image is ignoring my style tags. 该图像忽略了我的样式标签。 Can somebody please explain why I cannot format the div's background image? 有人可以解释一下为什么我不能格式化div的背景图像吗？ I would like to scale the img/Stage-Background.png down from 1600x1076 down to 750x650 我想将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>

Answer 1

Based out of my knowledge we cannot scale a background image 根据我的知识，我们无法缩放背景图片

If your image dimensions are greater than that of the div then 如果您的图片尺寸大于div的尺寸，则

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

with xyz.png dimensions greater than div's width and height. xyz.png尺寸大于div的宽度和高度。

You can use: 您可以使用：

background-position:center;

Else try using normal img tag then use absolute positioning to place your elements on top of the image. 否则，尝试使用常规的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>

The method to load the image of greater dimensions and then scaling won't give you good performance hence better to have the image scaled appropriately to the div element incase you want to use it as a background. 加载较大尺寸的图像然后进行缩放的方法不会为您提供良好的性能，因此，如果要将图像用作背景，则将图像适当缩放到div元素会更好。 Seeing your example its better if you make changes to the background image to the required size. 如果将背景图像更改为所需的大小，则查看示例效果会更好。

See this for more details on background position background-position to set correct fit 有关设置背景位置正确的背景位置的更多详细信息，请参见此内容

If you want to learn more about background image positions and how they are used commonly on web try reading about Image Sprites 如果您想了解有关背景图像位置的更多信息以及如何在网络上常用它们，请尝试阅读有关图像精灵的信息。

Answer 2

I guess you are dealing with this image: img/Stage-Background.png 我猜您正在处理此图像：img / Stage-Background.png

Instead of background-size, use height & width parameters in px. 而不是背景尺寸，请使用px中的height和width参数。

Also, if you can tell us what is the original size of the image, and what size you wish to keep for your DIV. 另外，如果您可以告诉我们图像的原始大小是多少，以及DIV希望保留的大小。

无法缩放背景div图像

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-04-30 06:28:31

解决方案2
0 2013-04-30 06:03:14

无法缩放背景div图像

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-04-30 06:28:31

解决方案2 0 2013-04-30 06:03:14

解决方案1
1 已采纳 2013-04-30 06:28:31

解决方案2
0 2013-04-30 06:03:14