19.CSS background
先来讲讲颜色表示法
一共有三种:单词、rgb表示法、十六进制表示法
rgb:红色 绿色 蓝色 三原色
光学显示器,每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同的颜色的。
用逗号隔开,r、g、b的值,每个值的取值范围0~255,一共256个值。
如果此项的值,是255,那么就说明是纯色:
黑色:
光学显示器,每个元件都不发光,黑色的。
白色:
颜色可以叠加,比如黄色就是红色和绿色的叠加:
再比如:
就是红、绿、蓝三种颜色的不同比例叠加。
16进制表示法
红色:
所有用#开头的值,都是16进制的。
#ff0000:红色
16进制表示法,也是两位两位看,看r、g、b,但是没有逗号隔开。
ff就是10进制的255 ,00 就是10进制的0,00就是10进制的0。所以等价于rgb(255,0,0);
怎么换算的?我们介绍一下
我们现在看一下10进制中的基本数字(一共10个):
0、1、2、3、4、5、6、7、8、9
16进制中的基本数字(一共16个):
0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f
16进制对应表:
十进制数 十六进制数
0 0
1 1
2 2
3 3
……
10 a
11 b
12 c
13 d
14 e
15 f
16 10
17 11
18 12
19 13
……
43 2b
……
255 ff
十六进制中,13 这个数字表示什么?
表示1个16和3个1。 那就是19。 这就是位权的概念,开头这位表示多少个16,末尾这位表示多少个1。
小练习:
16进制中28等于10进制多少?
答:2*16+8 = 40。
16进制中的2b等于10进制多少?
答:2*16+11 = 43。
16进制中的af等于10进制多少?
答:10 * 16 + 15 = 175
16进制中的ff等于10进制多少?
答:15*16 + 15 = 255
所以,#ff0000就等于rgb(255,0,0)
等价于:
所以,任何一种十六进制表示法,都能够换算成为rgb表示法。也就是说,两个表示法的颜色数量,一样。
十六进制可以简化为3位,所有#aabbcc的形式,能够简化为#abc;
比如:
等价于
比如:
等价于
只能上面的方法简化,比如
无法简化!
再比如
无法简化!
要记住:
#000 黑
#fff 白
#f00 红
#333 灰
#222 深灰
#ccc 浅灰
background-color属性表示背景颜色
background-img:表示设置该元素的背景图片
那么发现默认的背景图片,水平方向和垂直方向都平铺
background-repeat:表示设置该元素平铺的方式
属性值:
值 | 描述 |
---|---|
repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x | 背景图像将在水平方向重复。 |
repeat-y | 背景图像将在垂直方向重复。 |
no-repeat | 背景图像将仅显示一次。 |
inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
给元素设置padding之后,发现padding的区域也会平铺背景图片。
repeat应用案例
还是上面那个超链接导航栏的案例,我们给body设置平铺的图片,注意:一定找左右对称的平铺图片,才能实现我们要的效果
background-position: 属性设置背景图像的起始位置。这个属性设置背景原图像(由 background-image 定义)的位置
属性值:
值 | 描述 |
---|---|
|
如果您仅规定了一个关键词,那么第二个值将是"center"。 默认值:0 0; 这两个值必须挨在一起。 |
雪碧图技术(精灵图技术)
CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分
CSS 雪碧图应用原理:
只有一张大的合并图, 每个小图标节点如何显示单独的小图标呢?
其实就是 截取 大图一部分显示,而这部分就是一个小图标。
使用雪碧图的好处:
1、利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
2、CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
4、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便
不足:
1)CSS雪碧的最大问题是内存使用
2)拼图维护比较麻烦
3)使CSS的编写变得困难
4)CSS 雪碧调用的图片不能被打印
我们可以使用background综合属性制作通天banner,什么是通天banner呢,就是一般我们电脑的屏幕都是1439.但是设计师给我们的banner图都会比这个大,
那么我们可以此属性来制作通天banner。
background: red url('./images/banner.jpg') no-repeat center top;
background-attach
设置fixed之后,该属性固定背景图片不随浏览器的滚动而滚动
转载于:https://www.cnblogs.com/zsdbk/p/9090627.html
19.CSS background相关推荐
- 【每日一练】19—CSS 实现撕纸的效果
写在前面 今天我们来练习一个CSS实现的撕纸效果,这个效果,也会在一些设计网站上经常看到,但是这个用PS可以直接做成一张图片,但是,今天我们用CSS通过两张图片就实现了,这样做的好处,就是当我们替换图 ...
- CSS background 之设置图片为背景技巧
首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用): background-color 背景颜色 background-image 背景图片 ba ...
- html坐标轴背景色,CSS 背景(css background)
CSS 背景-CSS background 一.Css background背景语法 - TOP CSS背景基础知识CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式 ...
- CSS background(背景图片)详解
"在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片.有一定的参考价值,有需要的朋友可 ...
- CSS 背景-CSS background
这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法 - TOP CSS背景基础知识CSS 背景 ...
- Css background背景语法
一.Css background背景语法 - TOP CSS背景基础知识 CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式. 背景语法: background: b ...
- html css设置背景图片,css background之设置图片为背景技巧
Bac公斤round是什么含义,翻译过来有配景意义.异样在css内中作为css属性一成员同样是有后援含义,何况是设置装备摆设后盾图片.布景色调.布景图片截取等款式. 起首先来看看bac公斤round有 ...
- 学习笔记 css background 图片
学习笔记 css background 图片 <html><head><style>/*body {background: #ccc url(a.png) no-r ...
- CSS——background系列属性
关于颜色 能够用英语单词来表述的颜色都是简单的颜色 用rgb方法来表示: 光学显示器每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同颜色. 用逗号隔开, r, g, b的值,每个值的取值范围 ...
最新文章
- Udacity机器人软件工程师课程笔记(十二)-ROS-编写更复杂的ROS节点(arm_mover节点 和 look_away 节点)
- 归并排序原理及代码模板
- Py之cupy:cupy的简介、安装、使用方法之详细攻略
- ajax多文件上传,js限制上传文件大小,文件上传前在浏览器展示
- ASP.NET AJAX Preview 2
- STM32学了很久,我还是不会做项目。
- Linux清理磁盘挂载点方法(亲测有效)
- c++ 输出二进制_Python入门3print格式化输出的几种方法
- SQL:从入门到“精通”
- Symbian系统手机软件
- 计算机算法基础:分治法
- java程序员平均工资多少,详细说明
- win10计算机管理里找不到设备管理器的解决方法
- Can't connect to MySQL server on 'xxx.xxx.xxx.xxx' (10061),错误代码2003
- 如何使用Easy-POI导入复杂表头的Excel报表(含源码级分析)
- 固态硬盘的计算机需要进行磁盘碎片整理吗,浅析为什么固态硬盘不需要磁盘碎片整理...
- RepVGG: Making VGG-style ConvNets Great Again
- 修改织梦cms模板大全,织梦建站必看宝典
- sap 中怎样把非限制库存转为销售订单库存?
- 大事件后台管理系统——个人中心