背景属性二-【官方】百战程序员_IT在线教育培训机构

值	说明
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%;
}

background-position属性

该属性设置背景图像的起始位置，其默认值是：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;
}

background-attachment属性

该属性设置背景图像是否固定或者随页面滚动。简单来说就是一个页面有滚动条的话，滑动滚动条背景是固定的还是随页面滑动的

值	说明
scroll	背景图片随页面滚动而滚动
fixed	背景图片固定

background属性

background 简写属性在一个声明中设置所有的背景属性

background-image、background-repeat、background-position 其中background-size单独书写

实时效果反馈

1.下列哪个属性可以设置背景图片位置的调整：

A background-position

B background-repeat

C background-attachment

D background-size

答案

1=>A

背景属性一文本属性

北京市昌平区回龙观镇南店村综合商业楼2楼226室