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

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

相关文章

Django开发时如何避免频繁发送短信验证码(python图文代码)

《Django开发时如何避免频繁发送短信验证码(python图文代码)》Django开发时,为防止频繁发送验证码,后端需用Redis限制请求频率,结合管道技术提升效率,通过生产者消费者模式解耦业务逻辑... 目录避免频繁发送 验证码1. www.chinasem.cn避免频繁发送 验证码逻辑分析2. 避免频繁

精选20个好玩又实用的的Python实战项目(有图文代码)

《精选20个好玩又实用的的Python实战项目(有图文代码)》文章介绍了20个实用Python项目,涵盖游戏开发、工具应用、图像处理、机器学习等,使用Tkinter、PIL、OpenCV、Kivy等库... 目录① 猜字游戏② 闹钟③ 骰子模拟器④ 二维码⑤ 语言检测⑥ 加密和解密⑦ URL缩短⑧ 音乐播放

Python使用Tenacity一行代码实现自动重试详解

《Python使用Tenacity一行代码实现自动重试详解》tenacity是一个专为Python设计的通用重试库,它的核心理念就是用简单、清晰的方式,为任何可能失败的操作添加重试能力,下面我们就来看... 目录一切始于一个简单的 API 调用Tenacity 入门:一行代码实现优雅重试精细控制:让重试按我

Python实现MQTT通信的示例代码

《Python实现MQTT通信的示例代码》本文主要介绍了Python实现MQTT通信的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 安装paho-mqtt库‌2. 搭建MQTT代理服务器(Broker)‌‌3. pytho

MySQL进行数据库审计的详细步骤和示例代码

《MySQL进行数据库审计的详细步骤和示例代码》数据库审计通过触发器、内置功能及第三方工具记录和监控数据库活动,确保安全、完整与合规,Java代码实现自动化日志记录,整合分析系统提升监控效率,本文给大... 目录一、数据库审计的基本概念二、使用触发器进行数据库审计1. 创建审计表2. 创建触发器三、Java

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定,动态列2、动态下拉3、自定义锁定行/列,添加密码4、合并

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示

Visual Studio 2022 编译C++20代码的图文步骤

《VisualStudio2022编译C++20代码的图文步骤》在VisualStudio中启用C++20import功能,需设置语言标准为ISOC++20,开启扫描源查找模块依赖及实验性标... 默认创建Visual Studio桌面控制台项目代码包含C++20的import方法。右键项目的属性:

MySQL数据库的内嵌函数和联合查询实例代码

《MySQL数据库的内嵌函数和联合查询实例代码》联合查询是一种将多个查询结果组合在一起的方法,通常使用UNION、UNIONALL、INTERSECT和EXCEPT关键字,下面:本文主要介绍MyS... 目录一.数据库的内嵌函数1.1聚合函数COUNT([DISTINCT] expr)SUM([DISTIN

SpringBoot中4种数据水平分片策略

《SpringBoot中4种数据水平分片策略》数据水平分片作为一种水平扩展策略,通过将数据分散到多个物理节点上,有效解决了存储容量和性能瓶颈问题,下面小编就来和大家分享4种数据分片策略吧... 目录一、前言二、哈希分片2.1 原理2.2 SpringBoot实现2.3 优缺点分析2.4 适用场景三、范围分片