本文主要是介绍行背景图片水平垂直是否平铺样式代码,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
需求定义:不管水平是否平铺,垂直方向上都平铺。
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'>你好呢你好呢你好呢你好呢你好呢你好呢你好呢你好呢 上海世博会上海世博会上海世博会上海世博会上海世博会上海世博会上海世博会上海世博会 南非世界杯南非世界杯南非世界杯南非世界杯南非世界杯南非世界杯南非世界杯 <br/><br/><br/><br/></div><div>热爱祖国 热爱人民 热爱家乡 </div><br/><br/><div style='background-image: url(http://www.google.com.hk/intl/zh-CN/images/logo_cn.png);background-repeat:repeat'>你好呢你好呢你好呢你好呢你好呢你好呢你好呢你好呢 上海世博会上海世博会上海世博会上海世博会上海世博会上海世博会上海世博会上海世博会 南非世界杯南非世界杯南非世界杯南非世界杯南非世界杯南非世界杯南非世界杯 <br/><br/><br/><br/></div><div>热爱祖国 热爱人民 热爱家乡 </div></body>
</html>
这篇关于行背景图片水平垂直是否平铺样式代码的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!