css 背景图片怎么让他在浏览器中都居中显示?
#menu_bg{background:url(../images/index_x.jpg)repeat-xleft-100px;height:48px;width:96...
#menu_bg{background:url(../images/index_x.jpg) repeat-x left -100px;height:48px;width:966px;margin-left:150px;} 这段代码加点什么就会居中显示?
横向平铺,但是要在网页的中间显示,现在这个不对称,偏左了 展开
横向平铺,但是要在网页的中间显示,现在这个不对称,偏左了 展开
6个回答
展开全部
要是背景图片居中,需要借助于css中的background属性,background 简写属性其定义及用法如下:
background 简写属性在一个声明中设置所有的背景属性。可以设置如下属性:
1,background-color 规定要使用的背景颜色。
2,background-position 规定背景图像的位置。
3,background-size 规定背景图片的尺寸。
4,background-repeat 规定如何重复背景图像。
5,background-origin 规定背景图片的定位区域。
6,background-clip 规定背景的绘制区域。
7,background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
background-image 规定要使用的背景图像。
如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。
通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。
background-position 即是规定背景图片的位置。它的值分别有以下:
top,left,right,bottom
所以需要想背景图片居中显示的话,可以这样写:
#menu_bg{background:url(../images/index_x.jpg) center center;}
background 简写属性在一个声明中设置所有的背景属性。可以设置如下属性:
1,background-color 规定要使用的背景颜色。
2,background-position 规定背景图像的位置。
3,background-size 规定背景图片的尺寸。
4,background-repeat 规定如何重复背景图像。
5,background-origin 规定背景图片的定位区域。
6,background-clip 规定背景的绘制区域。
7,background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
background-image 规定要使用的背景图像。
如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。
通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。
background-position 即是规定背景图片的位置。它的值分别有以下:
top,left,right,bottom
所以需要想背景图片居中显示的话,可以这样写:
#menu_bg{background:url(../images/index_x.jpg) center center;}
展开全部
让背景图片居中有两种方法:一种是把子元素在父元素中,并让子元素在父元素中居中(margin:10px auto;),然后在子元素里把把背景铺开;另一种是用background 的position属性:background-position:center;或者background-position:50%。你把这个background-position属性好好看看就明白了。
此为垂直居中:#menu_bg{background:url(../images/index_x.jpg) repeat-x center;}
此为水平居中:#menu_bg{background:url(../images/index_x.jpg) repeat-y center;}
不平铺:#menu_bg{background:url(../images/index_x.jpg) no-repeat center;}
此为垂直居中:#menu_bg{background:url(../images/index_x.jpg) repeat-x center;}
此为水平居中:#menu_bg{background:url(../images/index_x.jpg) repeat-y center;}
不平铺:#menu_bg{background:url(../images/index_x.jpg) no-repeat center;}
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2012-08-15
展开全部
background:url(../images/index_x.jpg) repeat-x center -100px;
repeat-x 你横向平铺还 居中显示 脑袋啊???平铺就不能 实现居中了,你改改 div的 宽度,然后 你再试试 集中平铺和 左对齐平铺 和 右对齐平铺,估计区别不是很大,再不行 你就把图改改宽度。。
repeat-x 你横向平铺还 居中显示 脑袋啊???平铺就不能 实现居中了,你改改 div的 宽度,然后 你再试试 集中平铺和 左对齐平铺 和 右对齐平铺,估计区别不是很大,再不行 你就把图改改宽度。。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="370" style="background:url(img/mainImg1.gif) center top no-repeat;"><div style="width:800px; height:480px; _height:450px;margin:0 auto;"><div class="logo"><a href="#" title="1"></a></div></div></td>
</tr>
</table>
<tr>
<td height="370" style="background:url(img/mainImg1.gif) center top no-repeat;"><div style="width:800px; height:480px; _height:450px;margin:0 auto;"><div class="logo"><a href="#" title="1"></a></div></div></td>
</tr>
</table>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
#menu_bg{
background:url(../images/index_x.jpg) center no-repeat ;
height:48px;width:966px;margin-left:150px;
}
background:url(../images/index_x.jpg) center no-repeat ;
height:48px;width:966px;margin-left:150px;
}
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询