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

最新推荐文章于 2024-02-04 16:03:29 发布

全新时代

最新推荐文章于 2024-02-04 16:03:29 发布

阅读量610

点赞数

分类专栏： style 文章标签： Google

本文链接：https://blog.csdn.net/simpledev/article/details/83641239

版权

style 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求定义：不管水平是否平铺，垂直方向上都平铺。
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>

全新时代

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
行背景图片水平垂直是否平铺样式代码

需求定义：不管水平是否平铺，垂直方向上都平铺。1.如果水平不平铺，那么就会出现背景图片居左，居中，居右的情况。如下代码: background-image: url(http://www.google.com.hk/intl/zh-CN/images/logo_cn.png); background-attachment:fixed; background-position:left; back...
复制链接

扫一扫