JAVA全系列 教程
3762个小节阅读:7090.9k
目录
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
CSS背景属性主要有以下几个
属性 | 描述 |
---|---|
background-color | 设置背景颜色 |
background-image | 设置背景图片 |
background-position | 设置背景图片显示位置 |
background-repeat | 设置背景图片如何填充 |
background-size | 设置背景图片大小属性 |
该属性设置背景颜色
xxxxxxxxxx
<div class="box"></div>
.box{
width: 300px;
height: 300px;
background-color: palevioletred;
}
设置元素的背景图像
元素的背景是元素的总大小,包括填充和边界(不包括外边距)。默认情况下background-image属性放置在元素的左上角,如果图像不够大的话会在垂直和水平方向平铺图像,如果图像大小超过元素大小从图像的左上角显示元素大小的那部分
xxxxxxxxxx
<div class="box"></div>
.box{
width: 600px;
height: 600px;
background-image: url("https://www.itbaizhan.com/wiki/images/img1.jpg");
}
该属性设置如何平铺背景图像
值 | 说明 |
---|---|
repeat | 默认值 |
repeat-x | 只向水平方向平铺 |
repeat-y | 只向垂直方向平铺 |
no-repeat | 不平铺 |
xxxxxxxxxx
.box{
width: 600px;
height: 600px;
background-color: #fcc;
background-image: url("https://www.itbaizhan.com/wiki/images/img1.jpg");
background-repeat: no-repeat;
}
该属性设置背景图像的大小
值 | 说明 |
---|---|
length | 设置背景图片的宽度和高度,第一个值宽度,第二个值高度,如果只是设置一个,第二个值auto |
percentage | 计算相对位置区域的百分比,第一个值宽度,第二个值高度,如果只是设置一个,第二个值auto |
cover | 保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小 |
contain | 保持图片纵横比并将图像缩放成适合背景定位区域的最大大小 |
xxxxxxxxxx
.box{
width: 600px;
height: 600px;
background-image: url("https://www.itbaizhan.com/wiki/images/img1.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
该属性设置背景图像的起始位置,其默认值是:0% 0%
值 | 说明 |
---|---|
left top | 左上角 |
left center | 左 中 |
left bottom | 左 下 |
right top | 右上角 |
right center | 右 中 |
right bottom | 右 下 |
center top | 中 上 |
center center | 中 中 |
center bottom | 中 下 |
x% y% | 第一个值是水平位置,第二个值是垂直位置,左上角是0% 0%,右下角是100% 100% 。如果只指定了一个值,其他值默认是50%。默认是0% 0% |
xpos ypos | 单位是像素 |
xxxxxxxxxx
.box{
width: 600px;
height: 600px;
background-color: #fcc;
background-image: url("https://www.itbaizhan.com/wiki/images/img1.jpg");
background-repeat: no-repeat;
background-position: center;
}
实时效果反馈
1.下列哪个属性可以设置背景图片位置的调整:
A background-position
B background-repeat
C background-attachment
D background-size
2.下列关于background-repeat
属性描述错误的是:
A repeat-x只向水平方向平铺
B repeat-y只向垂直方向平铺
C no-repeat不平铺
D repeat默认不平铺
答案
1=>A 2=>D