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.效果

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。