11月9日背景属性
1.11月3日前端需要学习的知识、自闭合标签、meta标签、div标签2.11月6日标题标签、图片标签、链接标签、段落标签3.11月6日列表、标题、表格、基本、块级标签以及特殊符号4.11月7日form表单与input框以及select标签5.11月7日css介绍、基本格式、样式、选择器6.11月8日字体的属性7.11月9月label标签补充8.11月9月字体的属性2以及div模块的另一种用法
9.11月9日背景属性
10.11月9日边框11.11月9日display属性12.11月10日css盒子模型的margin和padding属性13.11月10日浮动float以及清除浮动clear14.11月10日overflow属性以及圆形头像的制作15.11月10月高度和长度的另外四种情况16.11月10日定位属性17.11月10日模态框和透明18.11月12日基础的网页设计以及阴影的设计box-shadow属性19.11月12日js的基础引入和注释20.11月13日js语言常量与变量21.11月13日js数据类型以及常见的方法22.11月13日布尔值(Boolean)23.11月13数组以及数组常用发法24.11月14日i++以及++i以及逻辑运算符25.11月14日流程控制26.11月14日三元运算27.11月14日函数的定义28.11月15日函数作用域和闭包函数29.11月16日自定义对象类型30.12月27日JSON对象31.12月29日正则对象32.12月29日正则对象33.2024-1-2bom对象34.2024-1-2 DOM概念以及部分用法35.2024-1-4事件36.2024-1-17 jq的简介、基础语法、选择器、部分操作37.2024-1-18文档处理38.2024-1-19事件绑定，input与hover事件39.2024-1-19阻止事件40.2024-1-19事件冒泡41.2024-1-22页面加载和事件委托42.2024-1-22动画效果和部分方法目录
背景属性
背景颜色以及背景图片的添加
背景颜色就是常用的background-color这个属性这就不多讲了。
背景图片的添加
需要用到background-image这个属性
代码如下
background-image: url("");
双引号下面添加图片链接
背景图片的选择
属性background-repeat是用于给背景图片选择放置方式
| 值 | 描述 |
|---|---|
| repeat(默认) | 背景图片平铺排满整个网页 |
| repeat-x | 背景图片只在水平方向上平铺 |
| repeat-y | 背景图片只在垂直方向上平铺 |
| no-repeat | 背景图片不平铺 |
然后实例代码如下
background-repeat属性值为repeat
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景属性</title>
<style>
#body1{
background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Faeae2093-a1ba-44f7-81e0-a3b23a11377f%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702107287&t=7089e0868f658ff00e86abcdb4d99fd3");
background-repeat: repeat;
}
</style>
</head>
<body id="body1">
</body>
</html>
效果如图
background-repeat属性值为repeat-x
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景属性</title>
<style>
#body1{
background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Faeae2093-a1ba-44f7-81e0-a3b23a11377f%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702107287&t=7089e0868f658ff00e86abcdb4d99fd3");
background-repeat: repeat-x;
}
</style>
</head>
<body id="body1">
</body>
</html>
效果如下
background-repeat属性值为repeat-y
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景属性</title>
<style>
#body1{
background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Faeae2093-a1ba-44f7-81e0-a3b23a11377f%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702107287&t=7089e0868f658ff00e86abcdb4d99fd3");
background-repeat: repeat-y;
}
</style>
</head>
<body id="body1">
</body>
</html>
效果如图
background-repeat属性值为no-repeat
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景属性</title>
<style>
#body1{
background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Faeae2093-a1ba-44f7-81e0-a3b23a11377f%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702107287&t=7089e0868f658ff00e86abcdb4d99fd3");
background-repeat: no-repeat;
}
</style>
</head>
<body id="body1">
</body>
</html>
效果如图
背景图片位置
这里需要用到background-position这个属性
假设现在有个图片如下，我要它瓶子那一块的属性
具体代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景属性</title>
<style>
div{
height: 300px;
width: 300px;
background-image: url("测试.png");
background-position: -200px -611px;
}
</style>
</head>
<body id="body1">
<div>背景</div>
</body>
</html>
效果如下
这里就实现了，首先建议使用谷歌浏览器进行修改因为方便。
该函数只能移动x和y轴，第一个数字是移动x轴的，第二个数字是移动y轴的。
特殊例子
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#div0{
height: 500px;
background-color: blue;
}
#div1{
height: 500px;
background-color:red;
}
#div2{
width: 100%;
height: 500px;
background-image: url("测试.png");
background-attachment: fixed
}
#div3{
height: 500px;
background-color: rebeccapurple;
}
#div4{
height: 500px;
background-color: deeppink;
}
</style>
</head>
<body>
<div id="div0"></div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
效果如下
