-1

我计划创建具有跨越浏览器宽度的背景的轮播。为此，我margin:0; padding:0;在正文中设置并将div跨越背景的我设置为width:100%. 我之所以选择这个，是因为它包含另一个div有左右边距的：auto; 使第二个在浏览器中div居中。div

我在尝试将背景图像添加到div跨越浏览器宽度的图像时遇到了问题。当我使用background-repeat:repeat-x;它时，它仍然只是浏览器最左侧的一个 550x1 像素的条子。它不重复。我认为这是由于 100% 的宽度。如果我放开 100% 宽度，我会遇到内部div被迫向右或向左的问题，这取决于所使用的显示器的分辨率。我不希望这种情况发生。

有谁知道我可以实现/模拟 100% 宽度并仍然使用的方法background-repeat:repeat-x;？

编辑，我使用 2 个 div，因为我正在应用 silverlight，并且想将它艺术地放置在屏幕上。这是我的代码，它可能会让我当时正在做的事情更有意义。如果您仍然认为 1 div 比 2 更好，请告诉我我错了，但这里是代码。它非常简单，因为在 Silverlight 中会做很多事情，或者至少我认为它会有点简单，但事情就是这样。

HTML
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="imd_data_Home" %>

<!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 runat="server">
    <title>Home</title>
    <link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id=NavContainer>
<div id="Navigation">
    <img src="img_data/dem_Logo.png" id="Logo"/>
</div>

</div>
<div id="Carousel">
<div id="SilverlightContainer">

</div>
</div>

</body>
</html>








CSS
body 
{
    margin:0;
    padding:0;
    background-color:#000061;
}

#NavContainer
{
    width:900px;
    margin-left:auto;
    margin-right:auto;
}

#Navigation
{
    height:75px;
    width:100%;
}

#Logo
{
    float:left;
}

#Carousel
{
    height:550px;
    width:100%;
    background-image:url('img_data/carousel_bar_01.png');
    background-repeat:repeat-x;
}

#SilverlightContainer
{
    height:550px;
    width:900px;
    margin-left:auto;
    margin-right:auto;
}
4

4 回答 4

2

你不必采取两个 div 来实现你想要的。只需将您的背景图像放在身体中即可

body{ background:url(image path here) repeat-x}

并给你的 div 一定的宽度，并给它一个像

div#yourID{margin:auto}

这对你有用。

于 2012-05-23T06:17:11.763 回答
0

你只需要一个 div，你想要的那个在中间。

<div class="centered"></div>

您在身体上设置背景：

body {
    min-height: 550px; 
    background: url(path/image.png) repeat-x;
    background-size: 1px 550px;
}

然后你有居中的 div：

.centered {
    min-height: 150px; /* whatever values you wish for height and width */
    width: 300px;
    margin: 75px auto; /* whatever values you wish for top/ bottom margin */
}

你可以在http://dabblet.com/gist/2774626上看到它

于 2012-05-23T11:20:58.470 回答
0

尝试这个：

body {
 width:100%;
 height:100%;
 background:url(your-image.jpg) repeat-x;
 position:absolute;
}
于 2012-05-23T10:59:55.943 回答
0

解决了！问题是我没有为图像放置正确的位置carousel_bar_01.png。

于 2012-05-24T00:24:31.417 回答