當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

web前端入门学习 css（3）（背景相关）

發布時間：2025/3/20 HTML 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 web前端入门学习 css（3）（背景相关）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

- css背景顏色（backgroud-color、transparent）
- css背景圖片 background-image
- 背景平鋪 background-repeat
- 背景圖片位置 background-position
- 示例：制作王者榮耀官網【成長守護平臺】小背景
- 示例：王者榮耀官網body里設置超大背景
- 用精確單位設置背景圖片background-position（還有混合單位）
- 背景圖像附著（固定不隨鼠標滾輪滾動）background-attachment: scroll | fixed![在這里插入圖片描述](https://img-blog.csdnimg.cn/20210315100446970.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RvbnRsYQ==,size_16,color_FFFFFF,t_70)
- 背景屬性的復合寫法
- 背景色半透明 background: rgba
- 背景圖片總結
- 五彩導航綜合案例（鼠標放上去顯示圖片會變）
- css三個重要特性（層疊性、繼承性、優先級）
- - 層疊性
  - 繼承性
- 文字行高的繼承性（行高比率的用法）
- 選擇器的優先級
- 繼承優先級的注意事項（權重注意點）
- 權重疊加的計算方法
- 權重練習案例

css背景顏色（backgroud-color、transparent）

例：

css背景圖片 background-image

例：

<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{width: 300px;height: 300px;background-image: url(微信圖片_20210308194755.jpg);}</style> </head> <body><div></div></body> </html>

背景平鋪 background-repeat

背景圖片位置 background-position

示例：

<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{width: 300px;height: 300px;background-color: rgb(87, 10, 10);background-image: url(img.jpg);background-repeat: no-repeat;background-position: center;}</style> </head> <body><div></div></body> </html>

示例：制作王者榮耀官網【成長守護平臺】小背景

示例：王者榮耀官網body里設置超大背景

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {background-image: url(7031353184732.jpg);background-repeat: no-repeat;background-position: top center;}</style> </head><body></body></html>

用精確單位設置背景圖片background-position（還有混合單位）

混合單位

背景圖像附著（固定不隨鼠標滾輪滾動）background-attachment: scroll | fixed

背景屬性的復合寫法

背景色半透明 background: rgba

背景圖片總結

五彩導航綜合案例（鼠標放上去顯示圖片會變）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>綜合案例-五彩導航</title><style>.nav a {display: inline-block;width: 179px;height: 172px;background-color: pink;text-align: center;line-height: 172px;color: rgb(247, 0, 173);text-decoration: none;}.nav .bg1 {background: url(GIF.gif) no-repeat;}.nav .bg1:hover {background-image: url(i.jpg);/* background-repeat: no-repeat; */}</style> </head><body><div class="nav"><a href="#" class="bg1">五彩導航</a></div> </body></html>

css三個重要特性（層疊性、繼承性、優先級）

層疊性

繼承性

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>綜合案例-五彩導航</title><style>div {color: teal;font-size: 16px;}</style> </head><body><div><p>龍生龍</p></div> </body></html>

文字行高的繼承性（行高比率的用法）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>行高的繼承</title><style>body {color: pink;/* font: 12px/24px 'Microsoft YaHei'; */font: 12px/1.5 'Microsoft YaHei';}div {/* 子元素繼承了父元素 body 的行高 1.5 *//* 這個1.5 就是當前元素文字大小 font-size 的1.5倍所以當前div 的行高就是21像素 */font-size: 14px;}p {/* 1.5 * 16 = 24 當前的行高 */font-size: 16px;}/* li 么有手動指定文字大小則會繼承父親的文字大小 body 12px 所以 li 的文字大小為 12px 當前li 的行高就是 12 * 1.5 = 18*/</style> </head><body><div>粉紅色的回憶</div><p>粉紅色的回憶</p><ul><li>我沒有指定文字大小</li></ul> </body></html>

選擇器的優先級

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS優先級</title><style>.test {color: red;}div {color: pink !important;}#demo {color: green;}</style> </head><body><div class="test" id="demo" style="color: purple">你笑起來真好看</div> </body></html>

繼承優先級的注意事項（權重注意點）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>css權重注意點</title><style>/* 父親的權重是 100 */#father {color: red!important;}/* p繼承的權重為 0 *//* 所以以后我們看標簽到底執行那個樣式,就先看這個標簽有么有直接被選出來 */p {color: pink;}body {color: red;}/* a鏈接瀏覽器默認制定了一個樣式藍色的有下劃線 a {color: blue;}*/a {color: green;}</style> </head> <body><div id="father"><p>你還是很好看</p></div><a href="#">我是單獨的樣式</a> </body> </html>

權重疊加的計算方法

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>權重的疊加</title><style>/* 復合選擇器會有權重疊加的問題 *//* 權重雖然會疊加,但是永遠不會有進位 *//* ul li 權重 0,0,0,1 + 0,0,0,1 = 0,0,0,2 2 */ul li {color: green;}/* li 的權重是 0,0,0,1 1 */li {color: red;}/* .nav li 權重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 11 */.nav li {color: pink;}</style> </head><body><ul class="nav"><li>大豬蹄子</li><li>大肘子</li><li>豬尾巴</li></ul> </body></html>

例： a: hover; a是元素選擇器，權重為0，0，0，1 hover是偽類選擇器，權重為0，0，1，0 所以a:hover的權重為0，0，1，1

權重練習案例

將首行小li改成粉色顯示
操作1：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS權重練習</title><style>/* 需求把第一個小li 顏色改為粉色加粗 ? *//* .pink 權重是 10 .nav .pink 20 */ul .pink {color: pink;font-weight: 900;}/* .nav li 權重是 11 */.nav li {color: red;}</style> </head><body><ul class="nav"><li class="pink">人生四大悲</li><li>家里沒寬帶</li><li>網速不夠快</li><li>手機沒流量</li><li>學校沒wifi</li></ul> </body></html>

操作2：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS權重練習</title><style>/* .nav li 權重是 11 */.nav li {color: red;}/* 需求把第一個小li 顏色改為粉色加粗 ? *//* .pink 權重是 10 .nav .pink 20 */ul .pink {color: pink;font-weight: 900;}</style> </head><body><ul class="nav"><li class="pink">人生四大悲</li><li>家里沒寬帶</li><li>網速不夠快</li><li>手機沒流量</li><li>學校沒wifi</li></ul> </body></html>

因為.nav li和ul .pink權重相同，所以優先選擇后指定的那個（最近的）

總結

以上是生活随笔為你收集整理的web前端入门学习 css（3）（背景相关）的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： web前端入门学习 css（2）
下一篇： web前端入门学习 css（8）（新增语