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

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如何精准判断某个进程是否在运行

《Python如何精准判断某个进程是否在运行》这篇文章主要为大家详细介绍了Python如何精准判断某个进程是否在运行,本文为大家整理了3种方法并进行了对比,有需要的小伙伴可以跟随小编一起学习一下... 目录一、为什么需要判断进程是否存在二、方法1:用psutil库(推荐)三、方法2:用os.system调用

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

使用Java将DOCX文档解析为Markdown文档的代码实现

《使用Java将DOCX文档解析为Markdown文档的代码实现》在现代文档处理中,Markdown(MD)因其简洁的语法和良好的可读性,逐渐成为开发者、技术写作者和内容创作者的首选格式,然而,许多文... 目录引言1. 工具和库介绍2. 安装依赖库3. 使用Apache POI解析DOCX文档4. 将解析

C++使用printf语句实现进制转换的示例代码

《C++使用printf语句实现进制转换的示例代码》在C语言中,printf函数可以直接实现部分进制转换功能,通过格式说明符(formatspecifier)快速输出不同进制的数值,下面给大家分享C+... 目录一、printf 原生支持的进制转换1. 十进制、八进制、十六进制转换2. 显示进制前缀3. 指

Python中判断对象是否为空的方法

《Python中判断对象是否为空的方法》在Python开发中,判断对象是否为“空”是高频操作,但看似简单的需求却暗藏玄机,从None到空容器,从零值到自定义对象的“假值”状态,不同场景下的“空”需要精... 目录一、python中的“空”值体系二、精准判定方法对比三、常见误区解析四、进阶处理技巧五、性能优化

使用Python实现全能手机虚拟键盘的示例代码

《使用Python实现全能手机虚拟键盘的示例代码》在数字化办公时代,你是否遇到过这样的场景:会议室投影电脑突然键盘失灵、躺在沙发上想远程控制书房电脑、或者需要给长辈远程协助操作?今天我要分享的Pyth... 目录一、项目概述:不止于键盘的远程控制方案1.1 创新价值1.2 技术栈全景二、需求实现步骤一、需求

Java中Date、LocalDate、LocalDateTime、LocalTime、时间戳之间的相互转换代码

《Java中Date、LocalDate、LocalDateTime、LocalTime、时间戳之间的相互转换代码》:本文主要介绍Java中日期时间转换的多种方法,包括将Date转换为LocalD... 目录一、Date转LocalDateTime二、Date转LocalDate三、LocalDateTim

jupyter代码块没有运行图标的解决方案

《jupyter代码块没有运行图标的解决方案》:本文主要介绍jupyter代码块没有运行图标的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录jupyter代码块没有运行图标的解决1.找到Jupyter notebook的系统配置文件2.这时候一般会搜索到

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版:拆分成模块让模块更强大:使用 __init__.py你一定会遇到的问题模www.

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La