background的使用
先简单的介绍颜色表示法
一共有三种:单词,rgb表示法,十六进制表示法 rgb:红色 绿色 蓝色 三原色 光学显示器,每个像素都是有三原色的发光原件组成的,靠明亮度不同调成不同的颜色的 有逗号隔开,r,g,b的值,每个值取值范围0~255一共256个值
黑色:
background-color:rgb(0,0,0); 光学显示器,每个原件都不发光,黑色的
白色:
background-color:rgb(0,0,0); 颜色可以叠加,不如黄色就是红色的叠加: background-color:(255,255,0) 再比如: background-color:rgb(111,222,123) 就是红,绿,蓝三种颜色的不同比例叠加
16进制表示法
红色:
background-color: #ff0000;
所有用#开头的值,都是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) background-color: #123456;
等价于:
background-color: rgb(18,52,86); 所以,任何一种十六进制表示法,都能够换算成为rgb表示法。也就是说,两个表示法的颜色数量,一样。 十六进制可以简化为3位,所有#aabbcc的形式,能够简化为#abc;
比如:
background-color:#ff0000;
等价于
background-color:#f00; 比如:
background-color:#112233;
等价于
background-color:#123; 只能上面的方法简化,比如
background-color:#222333;
无法简化!
再比如
background-color:#123123;
无法简化! 要记住:
#000 黑
#fff 白
#f00 红
#333 灰
#222 深灰
#ccc 浅灰
1.background-color属性表示背景颜色
2.background-img表示设置该元素的背景图片
name发现默认的背景图片,水平方向和垂直方向平铺
(需要加上no-repeat) 是取消水平和垂直方向的平铺
3.background-repeat:表示设置该元素平铺的方式
属性值:
值 | 描述 |
repeat | 默认,背景图像将在垂直方向和水平方向重复 |
repeat-x | 背景图像将在水平方向重复 |
repeat-y | 背景图像将在垂直方向重复 |
no-repeat | 背景图像将仅显示一次 |
inherit | 规定应该从父元素继承 background-repeat 属性的设置 |
repeat引用案例
注意:一定找左右对称的平铺图片,才能实现我们要的效果
background-position:属性背景图像的起始位置,这个属性设置背景原图像(由background-image 定义) 的位置
属性值:
值 | 描述 |
|
如果您仅规定了一个关键词,那么第二个值将是"center"。 默认值:0 0; 这两个值必须挨在一起。 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
雪碧图技术(精灵图技术)
CSS雪碧即CSS Sprite,也有人叫它CSS图像合并技术,该方法是将小图片和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分
CSS雪碧图应用原理
只要一张大的合并图,每一小图标节点如何显示单独的小图标?
其实雪碧图的好处:
1.利用CSS Sprites能很好地减少网页http的请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因,
2.CSS Sprites能减少图片的字节,曾经比较过多次三张图片的字节总是小于这三张图片的字节的总和
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之后,该属性固定背景图片不随浏览器的滚动而动
background的使用的更多相关文章
- css样式之background详解
background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name 规定颜色值为颜色名称的背景颜色(比如 red) he ...
- css样式之background详解(格子效果)
background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name 规定颜色值为颜色名称的背景颜色(比如 red) he ...
- CSS背景background、background-position使用详解
背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...
- CSS 中关于background 属性功能
background 是 css中的核心属性,我们对他应该充分了解. background-image 定义背景图像 这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...
- 1 background(复合属性)与font(复合属性) 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径
1 background(复合属性)与font(复合属性): background: 颜色 图片的链接 是否平铺 背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小 ...
- Android什么时候进行View中Background的加载
对大多数Android的开发者来说,最经常的操作莫过于对界面进行布局,View中背景图片的加载是最经常做的.但是我们很少关注这个过程,这篇文章主要解析view中背景图片加载的流程.了解view中背景图 ...
- CSS中对图片(background)的一些设置心得总结
写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...
- PopupWindow 点击外部和返回键无法消失背后的真相(setBackgroundDrawable(Drawable background))
刚接手PopupWindow的时候,我们都可能觉得很简单,因为它确实很简单,不过运气不好的可能就会踩到一个坑: 点击PopupWindow最外层布局以及点击返回键PopupWindow不会消失 新手在 ...
- CSS背景background详解,background-position详解
背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
随机推荐
- [NOIp2016]天天爱跑步 线段树合并
[NOIp2016]天天爱跑步 LG传送门 作为一道被毒瘤出题人们玩坏了的NOIp经典题,我们先不看毒瘤的"动态爱跑步"和"天天爱仙人掌",回归一下本来的味道. ...
- Wannafly挑战赛18C 异或和
傻逼题,和期望没毛关系... 分开xy坐标,n方直接统计每个坐标的曼蛤顿距离即可.. #include<bits/stdc++.h> #define il inline #define v ...
- 图解SSH原理
1. 初见SSH SSH是一种协议标准,其目的是实现安全远程登录以及其它安全网络服务. SSH仅仅是一协议标准,其具体的实现有很多,既有开源实现的OpenSSH,也有商业实现方案.使用范围最广泛的当然 ...
- Python函数之总结
''' 1.什么是函数 函数就是具备某一特定功能的工具 2.为什么用函数 减少重复代码 增强程序的扩展性 增强可读性 3.如何用函数 1.函数的使用原则:先定义后调用(*****) 定义阶段:只检测语 ...
- Springboot日记——核心编码篇
背景吐槽:想要让自己进阶一下,一定要有个可以拿出来秀的东西,所以要尝试写一个属于自己的网站或者平台.因此,我大概的看了一下springboot+Mybatis-plus+... 框架介绍 通常 SSM ...
- 北美KubeCon新风,正把K8S魔力带向边缘计算
作者:DJ 审校:Kevin·Wang 1. 容器生态圈新的创新方向 2018年容器技术圈的年终盛典北美KubeCon终于在西雅图落下了帷幕.这次北美KubeCon总共吸引了8000多观众参会,创下历 ...
- python笔记--冒泡排序升级版
前言 面试的时候经常有面试官喜欢问如何进行冒泡排序?这个问题相信能难倒一批英雄好汉,本篇就详细讲解如何用python进行冒泡排序. 一.基本原理 1.概念: 冒泡排序(Bubble Sort),是一种 ...
- ubuntu lvm模式进行扩容
ubuntu的16.04 18.04有lvm的功能(安装的时候的选项),能在磁盘空间用完的时候,无缝增加一个磁盘进去.因为linux系统只有一个盘,所以是非常方便,不会有windows加1个磁盘要进行 ...
- Unity 自定义编辑器窗口 画线
最近在学习状态机, 想自己实现一个可视化编辑器, 需要将多个状态之间用线条连接起来, 效果如下: 代码如下: Material m;Vector2 start;Vector2 end;Color co ...
- 【坚持】Selenium+Python学习之从读懂代码开始 DAY4
2018/05/21 [生成器详解:廖雪峰的官方网站](https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d ...