CSS背景
- 背景顏色
- 背景圖片位置
- 背景色半透明
背景顏色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>背景顏色</title>
<style>
div {
width: 200px;
height: 200px;
/* 背景顏色 */
/* background-color: blue;
transparent是默認值 透明的 */
/* 背景圖片 */
/* background-image: url();
url() 括號里面填寫圖片地址
默認none沒有背景圖片*/
/* 背景不平鋪 */
/* background-repeat: no-repeat; */
/* 默認背景平鋪 */
/* 沿著X軸/Y軸平鋪 */
/* background-repeat: repeat-x;
background-repeat: repeat-y; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
背景圖片位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>背景圖片位置</title>
<style>
h3 {
width: 200px;
height: 50px;
background-image: url(./csdn.png);
background-repeat: no-repeat;
/* 背景圖片位置 */
/* 背景位置方位名詞 */
background-position: center left;
/* 方位名詞部分順序，只寫一個另一個默認居中 */
/* background-position: 20px 30px; */
/* 精確位置第一個是X軸第二個是Y軸 */
/* 背景影像固固定 */
/* background-attachment: fixed; */
/* 默認scroll 背景圖片跟隨物件內容滾動 */
/* 背景復合性寫法 */
/* background: transparent url() repeat fixed top;
color image repeat fixed position
顏色 圖片 平鋪 滾動 位置 */
text-indent: 10em;
line-height: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<h3>csdn</h3>
</body>
</html>
背景色半透明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>背景色半透明</title>
<style>
div {
width: 300px;
height: 300px;
background: rgba(0, 0, 0, 0.5);
/* 0.5代表透明度是50% */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
ps:圖片來自黑馬程式員
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/274868.html
標籤：其他