web前端全系列 教程
1839个小节阅读:2243.5k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
CSS背景属性主要有以下几个
属性 | 描述 |
---|---|
background-color | 设置背景颜色 |
background-image | 设置背景图片 |
background-attachment | 设置背景图片是随内容滚动还是固定 |
background-position | 设置背景图片显示位置 |
background-repeat | 设置背景图片如何填充 |
background | 复合属性 |
该属性设置背景颜色
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;
}
实时效果反馈
1.下列关于background-repeat
属性描述错误的是:
A repeat-x只向水平方向平铺
B repeat-y只向垂直方向平铺
C no-repeat不平铺
D repeat默认不平铺
答案
1=>D