css - 更改背景图像

Question

我对编码还很陌生，正在逐步解决我遇到的问题:换掉背景图片。我对构成网站背景的三张图片做了非常的轻微调整。一个是加载得很好的主要背景图像(在 bodywrap 容器中)。下一个是带有 repeat-y 属性的包装图像，该属性自交换后不再使用 - 图像出现了，但只是显示为一条白线，而它是为了“填充”页面的其余部分.最后，页脚图像根本没有显示。

我认为将当前图像换成在 photoshop 中仅稍作调整的图像(我所做的只是删除阴影和红色边距)将是一件容易的事 - 我错了!

我试过调整代码，但没有成功，所以我复制了原来的代码。我认为问题出在我的 CSS 中:

#wrapper, footer, .pagetop, .copyright {
width:942px; 
margin:0 auto; 
padding:0px 37px 0px 37px; 
overflow:hidden; 
clear:both; 
}

.bodywrap {
background: url(images/background.png) 49.9% 0% repeat-x; 
width:1016px; 
margin:auto; 
overflow:hidden;
}

#wrapper { 
background: url(images/wrapper.png) 49% repeat-y; 
clear:both; 
padding-bottom:25px; 
min-height:225px;
}  

.footer {
background: url(images/footer.png) no-repeat 51% 0%; 
overflow:hidden; 
min-height:107px; 
font-size:1.2em; 
padding-top:17px;
font-family: 'Francois One', sans-serif;
} 

提前感谢您分享您的专业知识!

Answer 1

首先，我看到您的后台说明不一致。你的不重复是在你的对齐值之前和之后。我建议尝试在您的代码中的任何地方保持相同。当您的代码变得繁重时，它可能会令人困惑。

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}


right means align the image on the x axe to the right and
top means align the image on the y axe to the top

您是否了解您的 49.9% 值告诉背景图像从您所在的框边缘向左 49% 处开始重复。

还有你的.bodywrap没有高度。如果您只看到一条细线，那是因为您的元素只占用了该元素内的内容占用的空间。您可能有一个空格或一行代码。没有 HTML 很难说。

所以你需要给.bodywrap元素最小高度或高度等于您的图像高度。您为元素提供 AS 背景的图像未定义该元素的高度。 <img>标签和图像背景的作用不同。一个<img>标签将自行确定其高度，但您不能像背景一样重复它。

在这里您可以看到更多关于背景的信息:http://www.w3schools.com/css/css_background.asp