當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css --- [学习笔记]背景图片小结 css三大特性

發布時間：2023/12/10 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 css --- [学习笔记]背景图片小结 css三大特性小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

源代碼
參考

1. 行高(line-height)

目標

理解 - 能說出行高和高度三種關系 - 能簡單理解為什么行高等于單行文字會垂直居
應用
- 使用行高實現單行文字垂直居中
- 能會測量行高

2. CSS 背景(background)

目標

理解
- 背景的作用
- css 背景圖片和插入圖片的區別
應用
- 通過 css 背景屬性,給頁面元素添加背景樣式
- 能設置不同的背景圖片位置

2.1 背景顏色(color)

語法:

background-color: 顏色值; 默認的值是 transparent 透明的

2.2 背景圖片(image)

語法:

background-image: none | url (url); 參數作用

none	無背景圖(默認的)
url	使用絕對或相對地址指定背景圖像

background-image: url(images/demo.png);

小技巧: 我們提倡背景圖片后面的地址,url 不要加引號

2.3 背景平鋪(repeat)

默認平鋪

background-repeat: reapet; // 默認值

不平鋪

background-repeat； no-repeat;

水平平鋪

background-repeat: repeat-x;

豎直平鋪

background-repeat: repeat-y;

2.4 背景位置(position)重點

語法

background-position: length | length background-position: position || position 參數值

length	百分數\| 由浮點數字和單位標識符組成的長度值
position	top\| center \| bottom \| left \| center \| right

2.4.1 栗子

讓圖片靠右上角

.bg {width: 800px;height: 600px;background-color: pink;background-image: url(../lib/pics/1.jpg);background-repeat: no-repeat;background-position: right top; }

讓圖片水平居中垂直方向距離上側 10px

background-position: center 10px;

超大背景圖片的位置
一般是水平居中,垂直靠上

background-position: center top;

小圖片左側對齊盒子

background-position: 5px center;

2.4.2 小結

background-position: 第一個參數是 x 方向,第二個參數是 y 方向

可以使用精準詞(px、%)和描述詞(center、right、left)

2.5 背景附著

關鍵代碼

background-attachment: sroll(默認) || fixed

說明: 設置為fixed之后,背景圖片將不會隨著頁面的滾動而滾動.

2.6 背景簡寫

background: 屬性的值的書寫順序推薦寫成如下:

background: transparent url(image.jpg) repeat-y scroll center top;

2.7 背景透明(CSS3)

通常是一個遮擋塊,用來遮擋另一塊
當鼠標移動到上面的時候,會增加其透明度.提高用戶體驗

.alhpa{width: 300px;height: 300px;background: rgba(0, 0, 0, 0.3) }

一般默認透明度

3. CSS三大特性

目標:

理解
- 能說出css樣式沖突采取的原則
- 能說出哪些常見的樣式會有繼承
應用
- 能寫出CSS優先級的算法
- 能會計算常見選擇器的疊加值

3.1 CSS層疊性

概念:
- 所謂層疊性是指: 多種CSS樣式的疊加。
- 是瀏覽器處理沖突的一個能力,如果一個屬性通過兩個相同選擇器設置在同一個元素上,那么這個時候一個屬性就會將另一個屬性層疊掉
原則:
- 重復的就近繼承
- 不重復的就層疊

3.2 CSS繼承性

子標簽會繼承父標簽的

div {color: red; } <body><div><p>栗子哈哈哈 </p></div> </body>

利用繼承可以降低CSS代碼的復雜性.

3.3 CSS優先級(重點)

權重計算公式

選擇器權值

繼承或者*	0,0,0,0
元素標簽(span、div、p…)	0,0,0,1
類或偽類(.calss, a:hover)	0,0,1,0
id選擇器( #id)	0,1,0,0
style=""	1,0,0,0
!important	無窮大

總結

以上是生活随笔為你收集整理的css --- [学习笔记]背景图片小结 css三大特性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： java socket 重连复用_Jav
下一篇： Plc通讯控制三菱FX3U与台达VFD变