CSS中如何使用背景樣式屬性，看這篇文章就夠用了
css背景樣式屬性介紹
- 背景樣式就是自定義
HTML標籤的背景顏色或背景圖像。 - 背景屬性說明表
| 屬性名 | 屬性值 | 描述 |
|---|---|---|
| background-color | #f00、red、rgb(255,0,0) | 設置背景顏色 |
| background-image | url(背景圖片路徑) | 設置背景圖像 |
| background-repeat | repeat、repeat-x、repeat-y、no-repeat | 設置背景圖片是否平鋪和平鋪方向。 |
| background-position | left、center、right、top、bottom、固定值、百分比 | 設置背景圖片位置 |
| background-attachment | scroll、fixed | 設置背景圖片位置是不是固定或滾動。 |
| background | 屬性值就是以上的全部值 | 設置背景的縮寫形式。 |
屬性爲background-color使用方式
- 讓咱們進入屬性爲
background-color實踐，實踐內容如：將HTML頁面中的div背景設置爲紅色。 -
代碼塊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>background-color屬性使用</title>
<style>
div{
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
-
結果圖html
- 爲何咱們給
div標籤設置了background-color屬性，還有屬性值爲red，div標籤背景沒有發生任何變化呢？ - 緣由有2點如：
div標籤裏面沒有任何內容、div標籤沒有設置寬高度。 - 接下來咱們在實踐，將
div標籤放置一些內容。 - 代碼塊
<!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>background-color屬性使用</title>
<style>
div{
background-color: red;
}
</style>
</head>
<body>
<div>成功不是戰勝別人，而是改變本身。</div>
</body>
</html>
- 結果圖
- 如今屬性爲
background-color和屬性值爲red才真正的被渲染出來。 - 如今讓咱們將
div內容消除掉，而後咱們給div設置寬高度爲200px像素，看看屬性爲background-color和屬性值爲red，可否被渲染出來呢？ -
代碼塊ui
<!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>background-color屬性使用</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
-
結果圖url
-
注意：如今你們應該明白了屬性爲
background-color，只有設置了寬高度的元素或者元素裏面有內容，才能被渲染出來。3d
屬性爲background-image使用方式
- 屬性爲
background-image用於給元素設置背景圖片，將圖片路徑放在url()括號當中纔會被渲染。 - 屬性爲
background-image和屬性爲background-color是一致的，都必需要有寬高度和內容纔會被渲染。 讓咱們進入屬性爲
background-image實踐，實踐內容如：給div標籤設置背景圖片，div標籤寬高度設置爲400px像素。code-
代碼塊htm
<!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>background-image屬性使用</title>
<style>
div{
width: 400px;
height: 400px;
background-image: url(./img/001.png);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
-
結果圖blog
-
注意：屬性爲
background-image默認圖片是平鋪的，因此這個結果圖並不奇怪哈。圖片
屬性爲background-repeat使用方式
- 屬性爲
background-repeat有2種做用如： - 一、元素的背景圖片是否平鋪。
- 二、設置背景圖片的水平方向平鋪或垂直方向平鋪。
- 屬性爲
background-repeat的屬性值有4種如：repeat、repeat-x、repeat-y、no-repeat。 background-repeat屬性值說明表：
| 屬性值 | 描述 |
|---|---|
| repeat | background-repeat屬性的默認值，做用表示背景圖片平鋪。 |
| repeat-x | 做用：將背景圖片設置爲水平方向平鋪。 |
| repeat-y | 做用：將背景圖片設置爲垂直方向平鋪。 |
| no-repeat | 做用：將背景圖片設置爲不平鋪。 |
屬性值爲repeat實踐
- 讓咱們進入屬性爲
background-repeat而且屬性值爲repeat實踐，實踐內容如：將div標籤背景圖片設置爲平鋪。 -
代碼塊it
<!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>background-repeat屬性使用</title>
<style>
div{
width: 400px;
height: 400px;
background-image: url(./img/001.png);
background-repeat: repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
-
結果圖
-
注意：假設咱們不設置屬性爲
background-repeat而且屬性值爲repeat，也沒有關係的默認就是平鋪。
屬性值爲repeat-x實踐
- 讓咱們進入屬性爲
background-repeat而且屬性值爲repeat-x實踐，實踐內容如：將div標籤背景圖片設置爲水平方向平鋪，爲了給初學者一個直觀的印象，筆者將div標籤添加了一個邊框樣式。 -
代碼塊
<!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>background-repeat屬性使用</title>
<style>
div{
width: 400px;
height: 400px;
border: 1px solid red;
background-image: url(./img/001.png);
background-repeat:repeat-x;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
-
結果圖
屬性值爲repeat-y實踐
- 讓咱們進入屬性爲
background-repeat而且屬性值爲repeat-y實踐，實踐內容如：將div標籤背景圖片設置爲垂直方向平鋪，爲了給初學者一個直觀的印象，筆者將div標籤添加了一個邊框樣式。 -
代碼塊
<!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>background-repeat屬性使用</title>
<style>
div{
width: 400px;
height: 400px;
border: 1px solid red;
background-image: url(./img/001.png);
background-repeat:repeat-y;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
-
結果圖
屬性值爲no-repeat實踐
- 讓咱們進入屬性爲
background-repeat而且屬性值no-repeat實踐，實踐內容如：將div標籤背景圖片設置爲不平鋪，爲了給初學者一個直觀的印象，筆者將div標籤添加了一個邊框樣式。 -
代碼塊
<!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>background-repeat屬性使用</title>
<style>
div{
width: 400px;
height: 400px;
border: 1px solid red;
background-image: url(./img/001.png);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
-
結果圖
屬性爲background-position使用方式
- 屬性爲
background-position做用：設置背景圖片的位置在哪。 - 屬性爲
background-position的屬性值分爲3種使用方式如：英文單詞、固定值、百分比。 - 英文單詞的表示說明如：
left（居左）、right（居右）、top（居上）、bottom（居下）、center（居中） - 讓咱們進入屬性爲
background-position使用英文單詞設置背景的位置實踐。 - 默認就是居上和居左咱們就不實踐了，若是是初學者能夠嘗試下。
- 設置背景圖片位置爲居上和居右實踐。
-
代碼塊
<!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>background-position屬性使用</title>
<style>
div{
width: 400px;
height: 400px;
border: 1px solid red;
background-image: url(./img/001.png);
background-repeat:no-repeat;
background-position:center;
background-position: top right;
}
</style>
</head>
<body>
<div></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>background-position屬性使用</title>
<style>
div{
width: 400px;
height: 400px;
border: 1px solid red;
background-image: url(./img/001.png);
background-repeat:no-repeat;
background-position:center;
background-position: bottom left;
}
</style>
</head>
<body>
<div></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>background-position屬性使用</title>
<style>
div{
width: 400px;
height: 400px;
border: 1px solid red;
background-image: url(./img/001.png);
background-repeat:no-repeat;
background-position:center;
background-position: bottom right;
}
</style>
</head>
<body>
<div></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>background-position屬性使用</title>
<style>
div{
width: 400px;
height: 400px;
border: 1px solid red;
background-image: url(./img/001.png);
background-repeat:no-repeat;
background-position:center;
background-position: center center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
-
結果圖
- 以上就是英文單詞設置背景圖片的位置內容。
- 如今咱們進入固定值和百分比設置
div標籤背景圖片的位置實踐。 -
代碼塊
<!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>background-position屬性使用</title>
<style>
div{
width: 400px;
height: 400px;
border: 1px solid red;
background-image: url(./img/001.png);
background-repeat:no-repeat;
background-position:center;
background-position: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
-
結果圖
- 因爲簡單百分比就不進行代碼實踐了，
px單位換成%百分號就是按照元素的寬高度進行百分比計算背景圖片的位置。 - 其實英文單詞和固定值或百分比能夠混合使用呢，筆者將背景圖片位置設置爲居下而且是水平向右
20px像素。 -
代碼塊
<!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>background-position屬性使用</title>
<style>
div{
width: 400px;
height: 400px;
border: 1px solid red;
background-image: url(./img/001.png);
background-repeat:no-repeat;
background-position:center;
background-position: 20px bottom;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
-
結果圖
屬性爲background-attachment使用方式
- 屬性爲
background-attachment做用：就是設置背景圖片位置是不是固定或者是滾動的。 - 屬性爲
background-attachment屬性值說明表：
| 屬性值 | 描述 |
|---|---|
| scroll | 設置背景圖片滾動。 |
| fixed | 設置背景圖片固定。 |
- 讓我進入屬性爲
background-attachment實踐，實踐內容將div標籤背景圖片位置滾動和固定位置，方便你們理解滾動和固定筆者將在div標籤中放置一些內容。 - 屬性爲
background-attachment默認屬性值就是scroll滾動的。 - 背景圖片位置滾動的實踐
-
代碼塊
<!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>background-position屬性使用</title>
<style>
div{
width: 400px;
height: 400px;
border: 1px solid red;
background-image: url(./img/001.png);
background-repeat:no-repeat;
background-attachment:scroll;
}
</style>
</head>
<body>
<div>
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
</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>background-position屬性使用</title>
<style>
div{
width: 400px;
height: 400px;
border: 1px solid red;
background-image: url(./img/001.png);
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<div>
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
</div>
</body>
</html>
-
結果圖
屬性爲background使用方式
- 屬性爲
background就是設置背景的一個縮寫。本章內容你們都掌握了這個就如小菜一點不值一提哈，廢話就很少說了直接上代碼塊咯。 -
代碼塊
<!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>background屬性使用</title>
<style>
div{
width: 400px;
height: 400px;
border: 1px solid red;
background: url(./img/001.png) no-repeat top right scroll;
}
</style>
</head>
<body>
<div>
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
</div>
</body>
</html>
-
結果圖
相關文章
- 1. CSS如何設置列表樣式屬性，看這篇文章就夠用了
- 2. 學Aop？看這篇文章就夠了！！！
- 3. HttpServletRequest，看這篇文章就夠了
- 4. 強化學習如何入門？看這篇文章就夠了
- 5. MySQL的使用，看這篇就夠了
- 6. 使用TabLayout看這篇就夠了
- 7. 如何使用git——看這一篇就夠了
- 8. css經常使用樣式背景background如何使用
- 9. 用Python開發爬蟲，看這篇文章就夠了
- 10. 理解激活函數作用，看這篇文章就夠了！
- 更多相關文章...
- • XSD 如何使用? - XML Schema 教程
- • ionic 背景層 - ionic 教程
- • 三篇文章瞭解 TiDB 技術內幕——說存儲
- • 三篇文章瞭解 TiDB 技術內幕 —— 說計算
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
