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

2023-12-17 12:32

本文主要是介绍行背景图片水平垂直是否平铺样式代码,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

 

这篇关于行背景图片水平垂直是否平铺样式代码的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/504380

相关文章

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,:本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部

python判断文件是否存在常用的几种方式

《python判断文件是否存在常用的几种方式》在Python中我们在读写文件之前,首先要做的事情就是判断文件是否存在,否则很容易发生错误的情况,:本文主要介绍python判断文件是否存在常用的几种... 目录1. 使用 os.path.exists()2. 使用 os.path.isfile()3. 使用

Java中Map.Entry()含义及方法使用代码

《Java中Map.Entry()含义及方法使用代码》:本文主要介绍Java中Map.Entry()含义及方法使用的相关资料,Map.Entry是Java中Map的静态内部接口,用于表示键值对,其... 目录前言 Map.Entry作用核心方法常见使用场景1. 遍历 Map 的所有键值对2. 直接修改 Ma

深入解析 Java Future 类及代码示例

《深入解析JavaFuture类及代码示例》JavaFuture是java.util.concurrent包中用于表示异步计算结果的核心接口,下面给大家介绍JavaFuture类及实例代码,感兴... 目录一、Future 类概述二、核心工作机制代码示例执行流程2. 状态机模型3. 核心方法解析行为总结:三

Python实现自动化Word文档样式复制与内容生成

《Python实现自动化Word文档样式复制与内容生成》在办公自动化领域,高效处理Word文档的样式和内容复制是一个常见需求,本文将展示如何利用Python的python-docx库实现... 目录一、为什么需要自动化 Word 文档处理二、核心功能实现:样式与表格的深度复制1. 表格复制(含样式与内容)2

python获取cmd环境变量值的实现代码

《python获取cmd环境变量值的实现代码》:本文主要介绍在Python中获取命令行(cmd)环境变量的值,可以使用标准库中的os模块,需要的朋友可以参考下... 前言全局说明在执行py过程中,总要使用到系统环境变量一、说明1.1 环境:Windows 11 家庭版 24H2 26100.4061

pandas实现数据concat拼接的示例代码

《pandas实现数据concat拼接的示例代码》pandas.concat用于合并DataFrame或Series,本文主要介绍了pandas实现数据concat拼接的示例代码,具有一定的参考价值,... 目录语法示例:使用pandas.concat合并数据默认的concat:参数axis=0,join=

C#代码实现解析WTGPS和BD数据

《C#代码实现解析WTGPS和BD数据》在现代的导航与定位应用中,准确解析GPS和北斗(BD)等卫星定位数据至关重要,本文将使用C#语言实现解析WTGPS和BD数据,需要的可以了解下... 目录一、代码结构概览1. 核心解析方法2. 位置信息解析3. 经纬度转换方法4. 日期和时间戳解析5. 辅助方法二、L

Python使用Code2flow将代码转化为流程图的操作教程

《Python使用Code2flow将代码转化为流程图的操作教程》Code2flow是一款开源工具,能够将代码自动转换为流程图,该工具对于代码审查、调试和理解大型代码库非常有用,在这篇博客中,我们将深... 目录引言1nVflRA、为什么选择 Code2flow?2、安装 Code2flow3、基本功能演示

IIS 7.0 及更高版本中的 FTP 状态代码

《IIS7.0及更高版本中的FTP状态代码》本文介绍IIS7.0中的FTP状态代码,方便大家在使用iis中发现ftp的问题... 简介尝试使用 FTP 访问运行 Internet Information Services (IIS) 7.0 或更高版本的服务器上的内容时,IIS 将返回指示响应状态的数字代