<style>
p {
width: 100px;
height: 100px;
/* 设置背景颜色 */
background-color: red;
/* 设置背景图片 */
background-image: url(./img/小图.webp);
}
div.first {
width: 600px;
height: 600px;
background-color: pink;
/* 设置背景图 */
background-image: url(./img/小图.webp);
/* 设置是否平铺 */
background-repeat: no-repeat;
/* background-repeat-x: repeat; */
/* 设置图片在元素中的位置 */
background-position: 10px;
background-position: right center;
background-position: 50%;
display: inline-block;
}
.second {
display: inline-block;
width: 150px;
height: 150px;
background-image: url(./img/小图.webp);
background-size: 100% 100%;
}
.third {
display: inline-block;
width: 800px;
height: 1000px;
background-image: url(./img/中等图jpg.jpg);
background-repeat: no-repeat;
background-color: pink;
background-size: cover;
background-size: contain;
}
body {
background-image: url(./img/gaitubao_大图_png.png);
background-repeat: no-repeat;
background-attachment: scroll;
}
.item {
height:800px
}
</style>
1.设置背景颜色 background-color
取值:英文、rgba、rgb、#000000、hsl(a)
2.背景图片
使用场景:
① 常见的logo
② 装饰性的小图标
③ 超大图片
使用背景图的优点:可以更好的设置位置
2.1 background-image 设置背景图片
2.2 当背景图片大小<元素大小=》默认重复图片,将元素铺满
background-repeat:设置是否平铺
取值:no-repeat 设置不平铺
repeat 设置平铺(默认)
包括:background-repeat-x(水平方向)和background-repeat-y(垂直方向)
2.3 设置背景图片在元素中的位置
background-position
取值:
一个值:代表图片离元素左边的距离,垂直方向默认居中
二个值:第一个值代表图片离元素左边的距离,第二个值代表图片离元素顶部的距离
取值的类型:具体数值,方位词:left、right、top、bottom、center
百分比:元素本身的宽高
2.4 设置背景图片的大小
background-size:
取值:具体数值 百分比(元素本身的宽高)
cover:初始比例进行缩放,是最小一边铺满元素,有可能会出现图片显示不完全
contain:初始比例进行缩放,只要有一边完成铺满就可以,有可能会出现部分元素区域没有铺满
2.5 设置背景图片是否固定
background-attachment
取值:fixed 固定
scroll 随着滚动条进行滚动
-->
<p>护衣后罪不,能而绪。</p>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<p class="item"></p>