目录
背景属性
背景颜色以及背景图片的添加
背景颜色就是常用的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>
效果如下
