html5中设置整页背景图片的方法是利用css3样式：
写法如下：
img.bg {
/* Set rules to fill background */
min-height: 100%
min-width: 1024px
/* Set up proportionate scaling */
width: 100%
height: auto
/* Set up positioning */
position: fixed
top: 0
left: 0
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%
margin-left: -512px /* 50% */
}
}
效果如：
出现这个情况是因为没有css reset，我引入了meyerweb的css reset代码就解决了，代码如下：
<!DOCTYPE html><html>
<head>
<title>html怎样让一个背景图片设置的和ul的大小一样？</title>
<style type="text/css">
/*--开始 Reset CSS--*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0
padding: 0
border: 0
font-size: 100%
font: inherit
vertical-align: baseline
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block
}
body {
line-height: 1
}
ol, ul {
list-style: none
}
blockquote, q {
quotes: none
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ''
content: none
}
table {
border-collapse: collapse
border-spacing: 0
}
/*--结束 Reset CSS--*/
#div1{width:400pxheight:400pxbackground:redposition:absolute}
#tishi1{display:blockwidth:80pxheight:217pxposition:relativebackground:#fff}
#tishi1 li{height:31pxwidth:80pxtext-align:centerline-height:31pxfont-size:6pxdisplay:blockbackground:green}
</style>
</head>
<body>
<div id="div1">
<ul id="tishi1">
<li>aaa</li>
<li>vvv</li>
<li>ccc</li>
<li>bbb</li>
<li>rrr</li>
<li>tty</li>
<li>yyy</li>
</ul>
</div>
</body>
</html>
以上代码，我把tishi1的background改为#fff的，因为你没有把图片上传，测试结果如下图显示：
如果还是无法解决的，请追问。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）