如何将div或表格与居中的无重复背景图像对齐？ [英] How can I align div or table with a centered no-repeat background image?
问题描述
我来自FP 2003，过去经常使用表格，现在正试图进入CSS div。我可以将页面中的第一个div与我的背景图像中的左上角完全对齐。我需要这个因为我从Photoshop导出剪切并且对齐必须是完美的...
谢谢，
如果有人要求代码：< br>
<！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>
< meta content =" text / html;字符集= UTF-8英寸HTTP的当量= QUOT;内容类型" />
< title> Untitled 1< / title>
< style type =" text / css">
.style1 {
vertical-align：sub;
}< / style>
< / head>
< body background =" Back.jpg" style =" margin：0;背景位置：中心; background-repeat：no-repeat; background-image：url（'Back.jpg'）">
< div id =" top"> < div id =" menu">< img style =" position：inherit" SRC =" imgBD.gif" originalAttribute = QUOT; SRC" originalPath = QUOT; imgBD.gif" />< div>
< img align =" baseline" SRC =" imgBF.jpg" originalAttribute = QUOT; SRC" originalPath = QUOT; imgBF.jpg" />< img align =" baseline" SRC =" imgC0.gif" originalAttribute = QUOT; SRC" originalPath = QUOT; imgC0.gif" />< img align =" baseline" SRC =" imgC2.gif" originalAttribute = QUOT; SRC" originalPath = QUOT; imgC2.gif" />< img align =" baseline" SRC =" imgC4.gif" originalAttribute = QUOT; SRC" originalPath = QUOT; imgC4.gif" />< img align =" baseline" SRC =" imgC6.gif" originalAttribute = QUOT; SRC" originalPath = QUOT; imgC6.gif" />< img align =" baseline" SRC =" imgC8.gif" originalAttribute = QUOT; SRC" originalPath = QUOT; imgC8.gif" />< img src =" imgCA.gif" originalAttribute = QUOT; SRC" originalPath = QUOT; imgCA.gif" />< / div>
< / div>
< / div>
< / body>
< / HTML>结果
I'm coming from FP 2003, and used to use tables a lot, now trying to jumo into CSS div. Can can I link the first div in my page to line exactly with the top left from my background image. I need that because I export cut out from Photoshop and alignment has to be perfect...
Thanks,
In case anyone asks for the code:
<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
.style1 {
vertical-align: sub;
}
</style>
</head><body background="Back.jpg" style="margin: 0; background-position:center; background-repeat: no-repeat; background-image: url('Back.jpg')">
<div id="top"> <div id="menu"><img style="position:inherit" src="imgBD.gif" originalAttribute="src" originalPath="imgBD.gif" /><div>
<img align="baseline" src="imgBF.jpg" originalAttribute="src" originalPath="imgBF.jpg" /><img align="baseline" src="imgC0.gif" originalAttribute="src" originalPath="imgC0.gif" /><img align="baseline" src="imgC2.gif" originalAttribute="src" originalPath="imgC2.gif" /><img align="baseline" src="imgC4.gif" originalAttribute="src" originalPath="imgC4.gif" /><img align="baseline" src="imgC6.gif" originalAttribute="src" originalPath="imgC6.gif" /><img align="baseline" src="imgC8.gif" originalAttribute="src" originalPath="imgC8.gif" /><img src="imgCA.gif" originalAttribute="src" originalPath="imgCA.gif" /></div>
</div>
</div></body>
</html>
这篇关于如何将div或表格与居中的无重复背景图像对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
