background

颜色的表示法：

  • 单词  例如：red
  • rgb表示法 例如： (255,0,0)
  • 十六进制表示法 例如：#ff0000

　　

rgb:红色 绿色 蓝色 三原色
光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。
用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值。
如果此项的值，是255，那么就说明是纯色：

黑色：
background-color: rgb(0,0,0);
光学显示器，每个元件都不发光，黑色的。

白色：
background-color: rgb(255,255,255);

颜色可以叠加，比如黄色就是红色和绿色的叠加：
background-color: rgb(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 浅灰

background-color 属性表示背景颜色。

background-img：表示设置该元素的背景图片。

　　默认的背景图片，水平方向和垂直方向都平铺。

background-repeat：表示设置该元素平铺的方式：

　　属性值：

　　　　repeat：默认，背景图像将在垂直和水平方向重复。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .d1{
            width: 600px;
            height: 600px;
            border:1px solid red;
            background-image: url("../../images/1.jpg");
        }
    </style>
</head>
<body>
    <div class="d1">
    </div>
</body>
</html>
repeat

　　　　repeat-x：背景图像将在水平方向重复。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .d1{
            width: 600px;
            height: 600px;
            border:1px solid red;
            background-image: url("../../images/1.jpg");
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
    <div class="d1">
    </div>
</body>
</html>
repeat-x

　　　　repeat-y：背景图像将在垂直方向上重复。

　　　　no-repeat：背景图像将仅显示一次。

　　　　inherit：规定应该从父元素继承background-repeat属性的设置。

repeat应用案例：

　　background-position：属性设置背景图像的起始位置，这个属性设置背景原图像的位置。

　　属性值：

值描述
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left

bottom center

  • bottom right

如果您仅规定了一个关键词，那么第二个值将是"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;

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width:100%;
            height: 640px;
            background:url(../../images/2.jpg) no-repeat 0;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
View Code

 

background-attachment:

设置fixed之后，该属性固定背景图片不随浏览器的滚动而滚动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            widows: 1000px;
            height: 800px;
            background-image: url(../../images/1.jpg);
            border:1px solid red;
            background-repeat: no-repeat;
            padding: 50px;
            background-position: right left;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
View Code

 

posted @ 2018-05-25 16:23  Qingqiu_Gu  阅读(232)  评论(0)  编辑  收藏  举报