背景颜色
<!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://blog.csdn.net/m0_56787796/article/details/115583830
查看评论