DIV CSS优化

2023-11-14

一.Css background背景语法

CSS背景基础知识
CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式。

背景语法:
background: background-color || background-image || background-repeat || background-attachment ||background-position

CSS中背景单词:
backgroundCSS手册查询-background手册
background-color 设置颜色作为对象背景颜色
background-image 设置图片作为背景图片
background-repeat 设置背景平铺重复方向
background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。
background-position 设置或检索对象的背景图像位置。

Background背景样式的值是复合属性值组合,也就是背景单词的值可以跟多个属性值,值与值之间使用一个空格间隔链接上即可。
如:
background:#000 url(图片地址) no-repeat left top

Css background背景作用:
1、设置纯色背景。背景background可以设置对象纯色的背景颜色,
2、设置图为背景。可以设置对象背景为图片,如果背景是图片可以让图片重复平铺横铺,或将图片作为对象背景固定在对象任何位置。

Background分析解析图

CSS背景background样式解剖图
Css background复合背景结构分析图

Body{background:#FFF url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 0 0 fixed }
设置网页背景样式

Html原始背景与CSS背景对照
Html是指对应效果的table背景设置

Html背景单词:
Bgcolor
设置背景颜色 与CSS背景颜色对应background-color
Background设置图片作为背景与CSS背景图片对应background-image

最原始HTML背景设置演示代码:

 
  1. <tablebgcolor="#996600">
  2. <tr>
  3. <tdbackground="http://www.divcss5.com/img/css-logo.gif"
  4. width="130"height="100">&nbsp;</td>
  5. </tr>
  6. </table>

这里设置了table背景颜色为#996600,然后设置了td的背景图片为http://www.divcss5.com/img/css-logo.gif

二.背景颜色

background-color:#FFF
div{background-color:#FFF}
设置对象背景为纯白色

如果是给table设置背景颜色可以使用bgcolor="颜色值"即可设置对象背景颜色。
如果是CSS背景颜色,可使用background-color:颜色值;或 background:颜色值设置对象背景颜色。
CSS 背景颜色设置DIV+CSS演示图:

html背景,CSS 背景实例演示
以上截图分别使用background-color和background来设置对象背景颜色

三.CSS图片背景

这里说的是以图片作为背景图片 -CSS 背景图片详细介绍:http://www.divcss5.com/jiqiao/j80.shtml
CSS可以使用background或background-image直接引用图片地址来设置图片作为对象背景。

background:url(http://www.divcss5.com/img/logo.gif);设置DIVCSS5的LOGO图片作为背景

background-image:url(http://www.divcss5.com/img/logo.gif);具有相同效果。这样设置图片作为背景有个缺陷就是图片会上下左右的重复,接下来我们只需看以下图例教程即可掌握CSS background

CSS background解剖图
图片背景样式(固定、滚动)

实现这个效果使用CSS单词是background-attachment 当然通常情况下背景默认是固定的如果是自己使用CSS background简写则如上图。
background-attachment使用解析:
background-attachment:fixed; 背景固定
background-attachment:scroll css背景图片是随对象内容滚动

图片background背景语法:

background-image :url (url)
background-image :url (http://www.divcss5.com/img201301/divcss5-logo-2013.gif)设置对象背景为图片http://www.divcss5.com/img201301/divcss5-logo-2013.gif

如果图片作为背景时候要求是否重复平铺,平铺方向等我们都需要background-position和background-repeat配合使用

div{background-image :url (http://www.divcss5.com/img201301/divcss5-logo-2013.gif);background-repeat : no-repeat;background-position : 5px 6px }
这里定义对象div,背景图片为http://www.divcss5.com/img201301/divcss5-logo-2013.gif,并且背景图片不重复,定位于div对象靠左距离5px,靠上距离6px

四.DIV CSS背景居中

CSS 背景分为左右居中和上下居中,具体左右居中方法见上图。
背景图像上下居中,可以使用计算上下高度然后平分设置,如上下高度距离为500px,那就设置图片居顶部多少PX可以让图片实现上下居中。

五.复合背景样式简写

我们使用时候都需要考虑到代码优简,这里可以优化的简写代码
1、如果只设置背景为单一颜色
background-color:#FFF 我们简写为 background:#FFF

2、图片设置为背景简写
background-image :url (http://www.divcss5.com/img201301/divcss5-logo-2013.gif);background-repeat : no-repeat;background-position : 5px 6px
我们简写为:
background:url (http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 5px 6px

六.CSS background(背景)总结

使用图片作为背景在一个网页布局中常常会遇到,希望大家能在实际中掌握其知识。一般设置对象图片作为背景属性实例 background:#666 url(图片地址) no-repeat center top ;(解释首先设置背景颜色 紧跟设置图片作背景 紧跟图片是否重复 然后跟图片在对象位置。前面的背景颜色可以不用设同时不是必须,一般使用图片作为对象背景如果要设置图片是否重复显示距离位置将设置图片位置)

1、设置图片作为背景如果图片设置图片在X坐标方向重复,如果再设置图片在对象位置的左或右位置时将无效,可设置在对象上或下位置开始显示。

2、设置图片作为背景如果图片设置图片在Y坐标方向重复,如果再设置图片在对象位置的上或下位置时将无效,可设置图片在对象左或右位置开始显示。

3、如果设置背景完全重复显示,那设置图片在对象上下左右位置开始显示将无线。

网页布局时候我们常常对网页背景设置颜色、背景设置图片,达到我们需要的美观效果,我们实践制作写css background背景尽量从简,图片引入时候注意路径正确,如需定位对象背景。

经典背景复合属性表达式:
.divcss5{background:#FFF url (http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 5px 6px}
这里既设置背景颜色,背景图片引入,背景图片定位、图片作为背景是否重复的样式。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

DIV CSS优化 的相关文章

  • python开发面向对象基础:人狗大战学面向对象

    一 通过函数写人狗大战这个故事 1 usr bin env python 2 coding utf 8 3 4 1 函数 人模子 5 def person name level life value 6 p dic 7 name name
  • C++专题:多态性与虚函数(详细!)

    目录 多态性的概念 虚函数 动态联编 晚绑定 和静态联编 早绑定 覆盖 重写 重载 隐藏 成员函数覆盖 重写 成员函数重载 成员函数隐藏 重定义 纯虚函数 抽象类 虚析构函数 限制构造函数 多态性是面向对象程序设计的重要特征之一 多态性机制
  • SQL及NoSQL学习系列1

    关系型数据库SQL 关系型数据库系统实现了关系模型 并用它来处理数据 关系模型在表中将信息与字段关联起来 也就是schemas 从而存储数据 这种数据库管理系统需要结构 例如表 在存储数据之前被定义出来 有了表 每一列 字段 都存储一个不同
  • javassist 在 spring boot jar中启动报错:javassist.NotFoundException

    由于需要在Springboot项目中动态替换一个方法的实现 所以引入了javassist 然而在IDEA中开发时一切正常 但是java jar启动就报错 Caused by javassist NotFoundException 在stac
  • [创业之路-64]:股权激励的十种形式

    薪酬有三件事 第一 实际绩效提高 第二 员工感受提高 第三 放大员工的未来价值 股权激励是放大价值最有效的说法 股权激励有利于企业与员工成为利益共同体 让员工相信对企业有利的一定对自己有利 股权激励有两个方向 一个是与奖励相关 二是与福利相
  • python入门学习随记(四)

    4 1 查找指定字符 本题要求编写程序 从给定字符串中查找某指定的字符 输入格式 输入的第一行是一个待查找的字符 第二行是一个以回车结束的非空字符串 不超过80个字符 输出格式 如果找到 在一行内按照格式 index 下标 输出该字符在字符
  • WinForm:禁用Panel容器滚动条自动移动位置的功能

    今天遇到了一个问题 描述如下 有一个Panel容器 将AutoScroll属性设置为True 此时Panel容器会在内容过多时自动展示一个滚动条 这个滚动条存在一个缺点 即会随着焦点变化自动滚向焦点位置 如果仅初始化界面时Panel滚动条位
  • MIT-BIH ECG 心电数据的下载和读取图解

    一 如何下载获取MIT BIH的数据从下面这个官方链接页面可以下载到所有48组MIT BIH心电数据 http www physionet org physiobank database mitdb 下面这个链接是MIT BIH数据库的详细
  • cocos2dx游戏以插件形式嵌入IE浏览器的实现

    一 cocos2dx渲染窗口修改及导出dll 1 思路 cocos2dx引擎使用opengl进行游戏画面的渲染 opengl的渲染窗口由其自身创建 具有跨平台性 那么我可以对渲染窗口进行修改 便可以达到将游戏窗口嵌入其他窗口的效果 2 实现
  • 【火灾检测】基于HSV特征实现火灾检测附matlab代码

    1 简介 针对传统火灾监测系统对于大空间的室内场合和开阔的室外环境易失效的问题 提出了一种结合火灾火焰特征和烟雾特征来进行判断的数字图像型火灾监测算法 火焰颜色特征是基于RGB颜色模型中的R G B三基色分量和它们之间的关系来判断是否有火焰
  • 网络攻防——ARP欺骗

    arp基础攻防 1 什么是arp攻击 2 arp攻击条件 3 arp如何进行攻击 3 1靶机环境搭建 3 2攻击机环境搭建 3 3如何发起arp攻击 4 如何防止arp攻击 5 参考文献 1 什么是arp攻击 ARP攻击是指攻击者利用ARP
  • python [3.2] urllib的使用

    urllib是python的一个获取url Uniform Resource Locators 统一资源定址器 的模块 它用urlopen函数的形式提供了一个非常简洁的接口 这使得用各种各样的协议获取url成为可能 它同时 也提供了一个稍微
  • 图灵1

    简介 艾伦 麦席森 图灵 英语 Alan Mathison Turing 1912年6月23日 1954年6月7日 英国数学家 逻辑学家 被称为计算机科学之父 人工智能之父 艾伦 麦席森 图灵 生平 1912年6月23日 艾伦 麦席森 图灵
  • SpringAOP的实现原理

    一 SpringAOP的面向切面编程 是面向对象编程的一种补充 用于处理系统中分布的各个模块的横切关注点 比如说事务管理 日志 缓存等 它是使用动态代理实现的 在内存中临时为增强某个方法生成一个AOP对象 这个对象包含目标对象的所有方法 在
  • 求m到n之间的素数和(函数)python

    目录 题目描述 AC代码 题目描述 输入两个正整数m和n m
  • k8s持久化存储

    目录 一 为什么要做持久化存储 1 emptyDir类型 2 hostPath 3 nfs 4 pvc 1 pv是什么 2 PVC是什么 5 storageclass 一 为什么要做持久化存储 在k8s中部署的应用都是以pod容器的形式运行
  • Windows 安装Redis(图文详解)

    一 Redis是什么数据库 Remote Dictionary Server Redis 是一个开源的使用 ANSI C 语言编写 遵守 BSD 协议 支持网络 可基于内存 分布式 可选持久性的键值对 Key Value 存储数据库 并提供
  • eclipse怎么在包里建一个包

    实现效果如下图 废话不多说 上图 1 设置Package Presentation 为Hierarchical 最为关键一步 2 在src下新建一个名为com abc hrm的包 3 在父包下新建子包a 因为只有一个子包 建完的子包会这样显
  • 关于绿色校园建设中综合能效平台的管理效益与研究

    摘要 伴随当前环保理念的不断发展 绿色节能理念也在逐步深入校园 为响应国家建设节约型校园的号召 本文以校园智能化综合能效管理平台建设为主题 介绍了平台建设方案 比较了某高校平台建设前后学生宿舍 教学及实训楼用能情况 分析结果表明高校综合能效
  • 啊哈C的简单使用

    打开啊哈C 新建一个程序输出hello world include

随机推荐

  • Java如何获取平台(操作系统)的默认编码

    Java如何获取平台 操作系统 的默认编码 平台 这两个字指的就是操作系统 比如Windows平台 MacOS平台 Linux平台 这也是我们经常读API文档的时候见到的英文 platform 如 platform encoding 如何获
  • spring-MVC

    Spring MVC Hello Spring MVC web xml 在WEB INF目录下创建 web xml 配置Spring MVC的入口 DispatcherServlet 把所有的请求都提交到该Servlet
  • 数据库十一章——并发控制

    11 1 并发控制概述 1 并发操作带来的数据不一致性 1 丢失修改 Lost Update 两个事务T1和T2读入同一数据并修改 T2的提交结果破坏了T1提交的结果 导致T1的修改被丢失 2 不可重复读 Non repeatable Re
  • XGBoost学习(六):输出特征重要性以及筛选特征

    XGBoost学习 一 原理 XGBoost学习 二 安装及介绍 XGBoost学习 三 模型详解 XGBoost学习 四 实战 XGBoost学习 五 参数调优 XGBoost学习 六 输出特征重要性以及筛选特征 完整代码及其数据 XGB
  • makefile-gdb

    makefile gdb 1 makefile makefile 文件中定义了 一系列的规则来指定 哪些文件需要先编译 哪些文件需要后编译 哪些文件需要重新编译 甚至于进行更复杂的功能操作 就像是一个shell脚本 其中也可以执行操作系统的
  • 关于迅雷与优酷

    迅雷的用户许可协议上有这样一段 4 4 使用本 软件 涉及到互联网服务 可能会受到各个环节不稳定因素的影响 存在因不可抗力 计算机病毒 黑客攻击 系统不稳定 用户所在位置 用户关机以及其他任何网络 技术 通信线路等原因造成的服务中断或不能满
  • 语义分割方法总结与综述

    语义分割论文 Dilated convolution low level high level information fusion 2019 CVPR DFANet Deep Feature Aggregation for Real Ti
  • 2207 字符串中最多数目的子字符串(递推)

    1 问题描述 给你一个下标从 0 开始的字符串 text 和另一个下标从 0 开始且长度为 2 的字符串 pattern 两者都只包含小写英文字母 你可以在 text 中任意位置插入一个字符 这个插入的字符必须是 pattern 0 或者
  • Axios请求使用XML格式进行请求

    第一次接触xml格式请求 因为我们公司要对接其他公司的平台 需要用XML格式进行请求 才可以打通内网访问 在网上查了好多资料也没明白这个格式怎么使用 试了多次 发现用模板字符串将请求内容包裹进去就可以使用 废话不多说 直接上代码 此处是请求
  • PL/SQL 动态Sql拼接where条件

    完整例子 DECLARE SQLSTR VARCHAR 200 SELECT FROM hr employees where 1 1 TYPE EMPCURTYP IS REF CURSOR V EMP CURSOR EMPCURTYP E
  • shell的文本处理( grep / sed / awk / find)

    1 grep文本过滤明令 全面搜索研究正则表达式并显示出来 grep 命令是一种强大的文本搜索工具 根据用户指定的 模式 对目标文本进行匹配检查 打印匹配到的行 由正则表达式或者字符及基本文本字符所编写的过滤条件 1 grep的格式 gre
  • 网络切片技术缺点_中国联通携手紫光展锐发布首款5G网络切片技术

    出品 搜狐科技 编辑 张雅婷 11月9日 中国联通携手紫光展锐发布全球首款支持完整3GPP标准化网络切片和eSIM的5G CPE VN007 据了解 CPE全称为客户终端设备 是适用于家里的一种微基站 不需要有线进户即可享受到高速上网体验的
  • 谷粒商城-启动renren-fast-vue

    关于启动renren fast vue 为了启动这个 这两天都快搞疯了 本人没搞过前端 所以很费劲 资料 包含node js10 16 3与python2 7 2 链接 https pan baidu com s 1CLSNkiQhMgtM
  • arXiv上传文章注意事项

    1 注册 不忍吐槽arxiv的注册过程 密码有格式要求 而且一旦输错了 得从头填一遍密码和验证码 唯一需要注意的是 如果想要后续用这个账号上传文章 一定记得用自己的 edu邮箱注册 edu cn自然也可以 因为非edu邮箱注册的账号 在上传
  • Java架构直通车——过滤器和拦截器使用

    文章目录 过滤器和拦截器的区别 Filter过滤器 Interceptor拦截器 过滤器和拦截器的区别 规范不同 Filter是Servlet规范中定义的 是Servlet容器支持的 而拦截器是Spring容器内的 是Spring框架支持的
  • 龙书D3D11章节习题答案(第五章)

    以下答案仅供参考 有错欢迎留言 Chapter 5 The Rendering Pipeline 1 Construct the vertex and index list of a pyramid 金字塔 as shown in Figu
  • Qt 解决用QLineEdit实现的输入框开始没有光标在闪烁的问题

    在项目中遇到new出来QLineEdit在开始时 没有光标在闪烁 此时需要重写QlineEdit 代码如下 h文件 class CLineEidt public QLineEdit Q OBJECT public CLineEidt QWi
  • 大数据技术——用户与组管理

    一 实验目的 1 了解linux用户和组 2 熟练掌握liunx用户和组的基本操作 3 进一步了解linux系统 二 实验内容 1 用户账号的添加 删除与修改 2 用户口令的管理 3 用户组的管理 三 实验原理或流程 Linux系统是一个多
  • QT两种方法实现定时器

    方法一 1 重写虚函数 void timerEvent QTimerEvent e 2 启动定时器 返回值为定时器id 参数为定时间隔 单位为毫秒 int startTimer int interval 代码 widget h ifndef
  • DIV CSS优化

    一 Css background背景语法 CSS背景基础知识CSS 背景这里指通过CSS对对象设置背景属性 如通过CSS设置背景各种样式 背景语法 background background color background image b