012 三大特性与背景

时间 2019-12-05

标签三大特性背景繁體版

原文原文链接

一：三大特性css

1.概述html

　　层叠性网站

　　继承性url

　　优先级spa

2.层叠性code

　　只有冲突了才有重叠，若是没有冲突，则没有重叠htm

　　有了重叠，按照css的顺序来，执行后面的样式对象

3.继承性blog

　　子标签会继承父标签的某些样式，如文本颜色和字号继承

　　子承父业

　　通常，子元素继承父元素的样式：text-，font-，line-这些元素开头的均可以，以及color

4.优先级

　　继承或者*的贡献值　　　　0,0,0,0

　　每一个元素的贡献值　　 0,0,0,1

　　每一个类和伪类的贡献值　　 0,0,1,0

　　每一个Id贡献的值　　　　　　 0,1,0,0

　　每一个行内样式贡献值　　　　 1,0,0,0

　　每一个！import的贡献值　　　无穷大

5.权重叠加

二：背景

1.是否平铺

　　background-repeat

　　属性有：

　　repeat：纵向与横向平铺

　　no-repeat：不平铺

　　repeat-x：在横向上平铺

　　repeat-y：在纵向上平铺

2.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         body {
 8             background-image: url(image/af4.jpeg);
 9             background-repeat: no-repeat;
10         }
11     </style>
12 </head>
13 <body>
14     
15 </body>
16 </html>

3.效果

4.位置

　　background-position

　　参数：

　　length：百分数，或者由浮点数和单位标识组成的长度值

　　position：top，center，bottom，left，right

三：背景图片实践

1.需求

　　大图片1920*1080

　　通常网站的图片都比较大，是为了更好的体验，为了那些大屏幕。

　　要怎么作呢？

　　看看下面的案例。

2.案例

　　水平center，纵向top。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         body {
 8             background-image: url(image/3567.jpg);
 9             background-position: center top;
10             background-repeat: no-repeat;
11             background-color: #000;
12         }
13     </style>
14 </head>
15 <body>
16 </body>
17 </html>

3.效果

四：背景固定

1.background-attachmeng

　　设置或检索背景图像是随着对象内容滚动仍是固定的

　　属性有：

　　fixed：背景是固定的

　　scroll：默认是滚动的

2.背景简写

　　没有特殊的要求

　　背景颜色，背景图片，是否平铺，是否滚动，背景位置

　　background:transparent url() repeat-y scroll 50% 0;

五：购物车

1.效果

　　在鼠标移动到图片上面，用户变成登陆

　　图片大小为263*109

2.程序

　　主要考虑在盒子里，如何让图片展现一个部分。就是对齐部分。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         a {
 8             width: 131px;
 9             height: 109px;
10             background:url(image/903.png) no-repeat left top;
11             display: block;
12         }
13         a:hover {
14             background-position: right bottom;
15         }
16     </style>
17 </head>
18 <body>
19     <a href="#"></a>
20 </body>
21 </html>

3.效果

　　----------------------

六：背景透明

1.语法格式

　　background：rgba()

　　盒子透明

　　0-255 red green blue

　　0-1为透明度

2.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         body {
 8             background-color: pink;
 9         }
10         div {
11             width: 200px;
12             height: 200px;
13             /*background-color: #000;*/
14             background: rgba(0,0,155,0.2); 
15         }
16     </style>
17 </head>
18 <body>
19     <div>
20         我是div内容
21     </div>
22 </body>
23 </html>

3.效果