行背景图片水平垂直是否平铺样式代码

simpledev

浏览: 197198 次
性别:
来自: 上海

最近访客更多访客>>

xiaohua1001

kevin7118

dousee

csdn_lich

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

style

Google

需求定义：不管水平是否平铺，垂直方向上都平铺。
1.如果水平不平铺，那么就会出现背景图片居左，居中，居右的情况。如下代码:
background-image: url(http://www.google.com.hk/intl/zh-CN/images/logo_cn.png);
background-attachment:fixed; background-position:left;
background-repeat:no-repeat; background-repeat:repeat-y;
备注：如果是Div显示，background-attachment:fixed;去掉（不然拖动滚动条，背景图片跟着滚动~~~）。如果是Table显示，一定要加上该属性（不然Table的Tr中每个Td都显示出该背景图片了~~）。
2.如果水平平铺，代码如下：
background-image: url(http://www.google.com.hk/intl/zh-CN/images/logo_cn.png);
background-repeat:repeat;
如果写成：background-repeat:repeat-x;background-repeat:repeat-y;是错误的。

例子如下：

<html>
	<body>
		<table border=1>
			<tr style='background-image: url(http://www.google.com.hk/intl/zh-CN/images/logo_cn.png);background-repeat:repeat,'>
				<td>你好呢你好呢你好呢你好呢你好呢你好呢你好呢你好呢<br/><br/><br/><br/><br/><br/></td>
				<td>上海世博会上海世博会上海世博会上海世博会上海世博会上海世博会上海世博会上海世博会</td>
				<td>南非世界杯南非世界杯南非世界杯南非世界杯南非世界杯南非世界杯南非世界杯</td>
			</tr>
			<tr>
				<td>热爱祖国</td>
				<td>热爱人民</td>
				<td>热爱家乡</td>
			</tr>
		</table>
		<br/><br/>
		<table border=1>
			<tr style='background-image: url(http://www.google.com.hk/intl/zh-CN/images/logo_cn.png); background-attachment:fixed; background-position:center;background-repeat:no-repeat;background-repeat:repeat-y'>
				<td>你好呢你好呢你好呢你好呢你好呢你好呢你好呢你好呢<br/><br/><br/><br/><br/><br/></td>
				<td>上海世博会上海世博会上海世博会上海世博会上海世博会上海世博会上海世博会上海世博会</td>
				<td>南非世界杯南非世界杯南非世界杯南非世界杯南非世界杯南非世界杯南非世界杯</td>
			</tr>
			<tr>
				<td>热爱祖国</td>
				<td>热爱人民</td>
				<td>热爱家乡</td>
			</tr>
		</table>
		<br/><br/>
	 <div style='background-image: url(http://www.google.com.hk/intl/zh-CN/images/logo_cn.png);background-position:left;background-repeat:no-repeat;background-repeat:repeat-y'>
				你好呢你好呢你好呢你好呢你好呢你好呢你好呢你好呢&nbsp;
				上海世博会上海世博会上海世博会上海世博会上海世博会上海世博会上海世博会上海世博会&nbsp;
				南非世界杯南非世界杯南非世界杯南非世界杯南非世界杯南非世界杯南非世界杯&nbsp;
				<br/><br/><br/><br/>
		</div>
		<div>
			  热爱祖国&nbsp;
				热爱人民&nbsp;
				热爱家乡&nbsp;
		</div>
		<br/><br/>
		<div style='background-image: url(http://www.google.com.hk/intl/zh-CN/images/logo_cn.png);background-repeat:repeat'>
				你好呢你好呢你好呢你好呢你好呢你好呢你好呢你好呢&nbsp;
				上海世博会上海世博会上海世博会上海世博会上海世博会上海世博会上海世博会上海世博会&nbsp;
				南非世界杯南非世界杯南非世界杯南非世界杯南非世界杯南非世界杯南非世界杯&nbsp;
				<br/><br/><br/><br/>
		</div>
		<div>
			  热爱祖国&nbsp;
				热爱人民&nbsp;
				热爱家乡&nbsp;
		</div>
	
	</body>
</html>

分享到：