2009-10-22 80 views
0

是否可以在div框架之外的div中扩展background元素?将div背景扩展到div元素之外

而且属于一种解决方法,我发现了一个后续问题:

我在后面放置我的主要内容我的HTML代码放在一个<img>。这样可以正确显示整个背景图像,但滚动条可以延伸图像的整个长度,当然图像也可以选择。有没有办法删除滚动条,使图像不可选?

的原因,我不把背景图像中的body风格的CSS是因为我要当调整浏览器窗口的背景附加到我的内容。

回答

0

也许你应该尝试从CSS使用图像背景,然后其他元素不会自动调整大小?

+0

如果我在CSS中使用'背景'功能,当窗口调整大小时,图像不会“跟随”内容。我的内容通过自动页边距居中。 – fr0th 2009-10-22 20:07:13

+0

即使您设置了背景:center center no-repeat url(您的图片所在的位置) – eugeneK 2009-10-22 21:12:45

0

我可能没有在脑海中看到你想要的东西......但是有CSS属性可以从项目中移除滚动条,只需使用overflow属性并将其设置为隐藏。

http://www.w3.org/TR/CSS2/visufx.html#overflow

如果你只是试图阻止对是DIV滚动条。如果您知道图像的大小,或者它总是相同,只需将DIV的宽度和高度设置为与图像相同,并将其全部显示出来。

据我所知,没有办法让背景内容大于显示它的项目。

1

尝试使用额外的包装<div>,并在其上设置背景图像。

1

问题1:第

问题2:使用代替<img>background-image财产。您可以将其放置在包含您的内容的<div>之后,或与您的内容放在同一个框中。使用background-image不会给你任何滚动条。

+0

除非我指定与图片尺寸相匹配的宽度和高度,否则背景不会被剪裁/包含在div尺寸中?而且一旦我指定这些尺寸不会出现滚动条? – fr0th 2009-10-22 21:00:36

+0

它会被裁剪,是的。如果出现滚动条,这是因为内容溢出,而不是背景图像。削减应该不是真正的问题(通常是可取的),但是,然后,我无法想象你想要做什么。 – stephenhay 2009-10-23 07:42:56

0

您可以将您的背景图像放在您的部门之外,但在调整浏览器大小时,请使用CSS定位将其保留在正确的位置。一个常见的解决方案是将背景位置设置为中心,分区也是如此,从而使它们保持在同一个位置。

1

“是否有可能在一个div扩展的背景元素的DIV框架外”

你可以给它通过调整2 div的margin和padding值做简单的错觉。这是纯粹的CSS,顶级div可以随意增长。底部div必须是一个设定的高度。我已经在多个浏览器测试这一点,并没有发现任何问题,但...

<div id="top" style="padding:0 0 300px 0; margin:0 auto -700px; background:red;" > 
my top content which can grow in height as much as possible.<br /><br /> 
my top content which can grow in height as much as possible.<br /><br /> 
my top content which can grow in height as much as possible.<br /><br /> 
my top content which can grow in height as much as possible.<br /><br /> 
my top content which can grow in height as much as possible.<br /><br /> 
my top content which can grow in height as much as possible.<br /><br /> 
my top content which can grow in height as much as possible.<br /><br /> 
my top content which can grow in height as much as possible.<br /><br /> 
</div> 

<div id="bottom" style="margin:400px 0 0; padding:0; height:300px;"> 
my bottom content at a set height - required!<br /><br /> 
</div> 

希望这有助于!这里是一个updated jsfiddle,这样你就可以立即看到它看起来像什么