html坐标轴背景色,CSS 背景(css background)

CSS 背景-CSS background

一、Css background背景语法   -   TOP

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

背景语法:

background: background-color || background-image || background-repeat || background-attachment || background-position

CSS中背景单词:

background CSS手册查询-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分析解析图

ec8dfa6c53e8fab1995b73077a77eb42.png

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背景设置演示代码:

width="130"height="100"> 

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

二、背景颜色   -   TOP

background-color:#FFF

div{background-color:#FFF}

设置对象背景为纯白色

如果是给table设置背景颜色可以使用bgcolor="颜色值"即可设置对象背景颜色。

如果是CSS背景颜色,可使用background-color:颜色值;或 background:颜色值设置对象背景颜色。

CSS 背景颜色设置DIV+CSS演示图:

35030e1e9a6a8a841eacc56a34b869ba.png

以上截图分别使用background-color和background来设置对象背景颜色

三、CSS图片背景   -   TOP

这里说的是以图片作为背景图片 -  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

72a31e0ae42dbf329f1fe949663d7194.png

图片背景样式(固定、滚动)

实现这个效果使用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背景居中   -   TOP

CSS 背景分为左右居中和上下居中,具体左右居中方法见上图。

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

五、复合背景样式简写   -   TOP

我们使用时候都需要考虑到代码优简,这里可以优化的简写代码

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(背景)总结   -   TOP

使用图片作为背景在一个网页布局中常常会遇到,希望大家能在实际中掌握其知识。一般设置对象图片作为背景属性实例 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}

这里既设置背景颜色,背景图片引入,背景图片定位、图片作为背景是否重复的样式。

希望大家好好理解有不懂的地方可以进入CSS 研教室讨论区发表问题,我们将尽力答复您。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/310759.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 965单值二叉树-简单

如果二叉树每个节点都具有相同的值,那么该二叉树就是单值二叉树。 只有给定的树是单值二叉树时,才返回 true;否则返回 false。 示例 1: 输入:[1,1,1,1,1,null,1] 输出:true 示例 2: 输入&…

使用EF.Core将同一模型映射到多个表

在 EntityFramework Core 中,我们可以使用属性或Fluent API来配置模型映射。有一天,我遇到了一个新的需求,有一个系统每天会生成大量数据,每天生成一个新的表存储数据。例如,数据库如下所示:所有表都具有相…

EntityFramework Core 3.x添加查询提示(NOLOCK)

前几天看到有博客园中有园友写了一篇关于添加NOLOCK查询提示的博文,这里呢,我将介绍另外一种添加查询提示的方法,此方式源于我看过源码后的实现,孰好孰歹,请自行判之,接下来我们一起来看看。在EntityFramew…

Xamarin.Forms客户端第一版

1. 功能简介1.1. 读取手机基本信息主要使用Xamarin.Essentials库获取设备基本信息,Xam.Plugin.DeviceInfo插件获取App Id,其实该插件也能获取设备基本信息。1.2. 读取手机联系人信息Android和iOS工程具体实现联系人读取服务,使用到Dependency…

给 EF Core 查询增加 With NoLock

给 EF Core 查询增加 With NoLockIntroEF Core 在 3.x 版本中增加了 Interceptor,使得我们可以在发生低级别数据库操作时作为 EF Core 正常运行的一部分自动调用它们。例如,打开连接、提交事务或执行命令时。所以我们可以自定义一个 Interceptor 来记录执…

LeetCode 138 复制带随机指针的链表-中等

给你一个长度为 n 的链表,每个节点包含一个额外增加的随机指针 random ,该指针可以指向链表中的任何节点或空节点。 构造这个链表的 深拷贝。 深拷贝应该正好由 n 个 全新 节点组成,其中每个新节点的值都设为其对应的原节点的值。新节点的 n…

ASP.NET Core分布式项目实战(业务介绍,架构设计,oAuth2,IdentityServer4)--学习笔记...

任务4:第一章计划与目录敏捷产品开发流程原型预览与业务介绍整体架构设计API 接口设计 / swaggerIdentity Server 4 搭建登录账号 API 实现配置中心任务5:业务介绍项目背景:基于人脉关系的金融行业项目用户:1、账号:基…

LeetCode 82 删除排序链表中的重复元素||-中等

存在一个按升序排列的链表,给你这个链表的头节点 head ,请你删除链表中所有存在数字重复情况的节点,只保留原始链表中 没有重复出现 的数字。 返回同样按升序排列的结果链表。 输入:head [1,2,3,3,4,4,5] 输出:[1,2,…

你复工了吗?啥感受?

这里是Z哥的个人公众号每周五11:45 按时送达当然了,也会时不时加个餐~我的第「136」篇原创敬上感觉还没做什么事情,2020年的第一季度就结束了。相信大多数人也都已经复工了。之前进行远程公办的,大多也都回到了原先在公…

LeetCode 1669合并两个链表-中等

给你两个链表 list1 和 list2 ,它们包含的元素分别为 n 个和 m 个。 请你将 list1 中第 a 个节点到第 b 个节点删除,并将list2 接在被删除节点的位置。 下图中蓝色边和节点展示了操作后的结果: 请你返回结果链表的头指针。 输入&#xff1a…

dotNET Core 3.X 使用 Web API

现在的 Web 开发大多都是前后端分离的方式,后端接口的正确使用显得尤为重要,本文讲下在 dotNET Core 3.X 下使用 Web API 。环境操作系统:MacIDE:RiderdotNET Core:3.1创建项目如果是 Windows 操作系统当然是首选 VS20…

你需要了解的 HTTP Status Code

你需要了解的 HTTP Status CodeIntro现在前后端分离的开发模式越来越流行,后端负责开发对应的 API,前端只需要 关注前端页面的数据展示和前端逻辑即可。对于前后端分离这种开发模式,我个人还是比较喜欢的,因为这样可以让更专业的人…

LeetCode 24两两交换链表中的节点-中等

给定一个链表,两两交换其中相邻的节点,并返回交换后的链表。 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换。 输入:head [1,2,3,4] 输出:[2,1,4,3] 示例 2: 输入:head []…

2021中考高考成绩查询,2021中考

2021年浙江东阳中考查分入口暂未公布!如有最新信息,中考网会第一时间发布,请中考生和家长及时关注中考网中考考试时间频道! 编辑推荐: 2021年浙江省中考查分时间及入口汇总 2021年全国各省市中考查分时间及入2021-06-1…

今天网站都变成灰色了,这其中是怎么实现的?

“ 阅读本文大概需要 7 分钟。 ”今天是 2020 年 4 月 4 日,星期六,清明节。我们的国家经历了非常惨痛的时刻,很多英雄在救助他人的路上倒下,更有很多烈士英雄保卫人民的安危遇难,今天全国下降半旗,北京时间…

深圳市公务员考试计算机专业素养,深圳市考职位分析_公务员考试专业对照表...

2020深圳市公务员招录1069人公告已发布,报名时间:11月13日-19日16:00,报名入口:深圳市考试院专栏(http://hrss.sz.gov.cn/szksy/)或深圳市人事考试考生服务系统(以下简称考生服务系统,https://hrsstext.sz.gov.cn/ess/…

LeetCode 61旋转链表-中等

给你一个链表的头节点 head ,旋转链表,将链表每个节点向右移动 k 个位置。 输入:head [1,2,3,4,5], k 2 输出:[4,5,1,2,3] 输入:head [0,1,2], k 4 输出:[2,0,1] 提示: 链表中节点的数目在…

科个普:进程、线程、并发、并行

一、进程刘大胖打开电脑,想写点东西,于是打开WPS,突然又想和女朋友(反正我不信)聊聊天,就又打开了微信PC端,这时操作系统就会为这两个程序生成两个进程,如图:二、线程每个进程至少包含一个线程&…

LeetCode 19删除链表的倒数第N个节点-中等

给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点。 进阶:你能尝试使用一趟扫描实现吗? 输入:head [1,2,3,4,5], n 2 输出:[1,2,3,5] 示例 2: 输入:head [1], n …

EFCore查询语句生成流程、让EFCore支持批量Update/Delete/MergeInto

引子之前发现了一款叫 EFCore.BulkExtensions 的 nuget 包。里面提供了大量的 BulkInsertOrUpdateOrDelete 和 BatchUpdate 的拓展&#xff0c;可以很方便的解决批量更新和删除的问题&#xff0c;不用让 EFCore 一条一条的删除和更新。其中几个比较有用的函数签名是Task<int…