代码是敲出来的，建议一个一个过一遍
背景属性
- 背景颜色
-
background-color 背景颜色 默认值是transparent(透明的)示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS基本样式</title>
<style>
body{
height: 1000px;
/*背景颜色 默认为透明 transparent*/
/*颜色的取值：
1.关键字：red、blue等
2.16进制：#000000、#cccccc、#ff0000等
3.rgb(0,0,0)
4.rgba(0,0,0,.5)
*/
background-color: red;
background-color: #ff0000;
background-color: rgb(255,0,0);
background-color: rgba(255,0,0,.5);
}
</style>
</head>
<body>
<h1>背景属性</h1>
</body>
</html>背景图片
-
background-image 背景图片 默认值是none(没有图片) 元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距 通过url使用绝对或相对地址指定图片 background-image: url("images/img.jpg"); 1.绝对路径：文件在网络或本地的绝对地址，从盘符开始 C:\Users\Administrator\Desktop\a.jpg 2.相对路径：相对于你当前目录，同一等级直接写图片名称即可，在下一级，用\查找，在上一级，用../查找。一般不使用绝对地址。
示例代码
<html>
<head lang="en">
<meta charset="UTF-8">
<title>背景属性</title>
<style>
body{
height: 1000px;
/*背景颜色 默认为透明 transparent*/
background-color: red;
/*background-color: #ff0000;*/
/*background-color: rgb(255,0,0);*/
/*background-color: rgba(255,0,0,.5);*/
/*背景图片 默认水平垂直平铺*/
/*background-image: url("images/pic2.jpeg");*/
/*背景图片平铺*/
/*background-repeat: no-repeat;*/
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
/*背景图片的大小*/
/*background-size:1000px ;*/
/*background-size: 100% 100%;*/
/*背景图片固定*/
/*background-attachment:fixed ;*/
background:red url("images/pic2.jpeg") no-repeat fixed ;
background-size: 100% 100%;
}
.box{
width: 800px;
height: 600px;
/*background-color: rgba(255,255,255,.5);
background-image: url("images/pic1.jpg");
background-repeat: no-repeat;*/
/*background-size: contain;*/
background: rgba(255,255,255,.5) url("images/pic1.jpg") no-repeat;
/*背景图片定位*/
/*background-position: x y;*/
/*当只有水平方向，垂直方向默认居中*/
/*background-position: 30px 30px;*/
/*background-position: 30px;*/
/*background-position: right bottom;*/
/*background-position: center;*/
/*简写为*/
/*background：颜色 图片 平铺 大小 定位 固定;*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>原文地址：https://www.cnblogs.com/Testking/p/12078547.html
时间： 2024-10-01 06:30:21