了解如何使用CSS更改元素的背景
可以使用几个CSS属性来更改元素的背景:
background-color
background-image
background-clip
background-position
background-origin
background-repeat
background-attachment
background-size
和速记财产background
,这可以缩短定义并将它们分组在一行中。
background-color
接受颜色值,该颜色值可以是color关键字之一,也可以是rgb
或者hsl
价值:
p {
background-color: yellow;
}
div {
background-color: #333;
}
通过指定图像位置URL,可以将图像用作元素的背景,而不必使用颜色:
div {
background-image: url(image.png);
}
background-clip
使您可以确定背景图像或颜色使用的区域。默认值为border-box
,它一直延伸到边框的外边缘。
其他值是
padding-box
将背景扩展到填充边缘,没有边框content-box
将背景扩展到内容边缘,而无需填充inherit
运用父母的价值
将图片用作背景时,您需要使用background-position
财产:left
,right
,center
是X轴的所有有效值,并且top
,bottom
对于Y轴:
div {
background-position: top right;
}
如果图像小于背景,则需要使用background-repeat
。应该是repeat-x
,repeat-y
或者repeat
在所有轴上?最后一个是默认值。另一个值是no-repeat
。
background-origin
使您可以选择将背景应用到的位置:使用以下命令对整个元素(包括填充)(默认值)进行应用padding-box
,使用包括边框在内的整个元素border-box
,不使用填充的元素content-box
。
和background-attachment
我们可以将背景附加到视口,以便滚动不会影响背景:
div {
background-attachment: fixed;
}
默认情况下,值为scroll
。还有另一个价值local
。可视化他们行为的最好方法是这个Codepen。
最后的背景属性是background-size
。我们可以使用3个关键字:auto
,cover
和contain
。auto
是默认值。
cover
扩展图像,直到整个元素被背景覆盖。
contain
当一维(x或y)覆盖图像的整个最小边缘时,将停止扩展背景图像,因此该图像已完全包含在元素中。
您还可以指定一个长度值,如果这样,它将设置背景图像的宽度(并且高度是自动定义的):
div {
background-size: 100%;
}
如果您指定2个值,则一个为宽度,第二个为高度:
div {
background-size: 800px 600px;
}
速记属性background
允许缩短定义并将它们分组在一行中。
这是一个例子:
div {
background: url(bg.png) top left no-repeat;
}
如果使用图像,但无法加载图像,则可以设置后备颜色:
div {
background: url(image.png) yellow;
}
您还可以将渐变设置为背景:
div {
background: linear-gradient(#fff, #333);
}
免费下载我的CSS手册
更多CSS教程:
- Flexbox指南
- CSS网格教程
- CSS变量(自定义属性)
- PostCSS简介
- CSS保证金属性
- 如何使用CSS将元素居中
- CSS系统字体
- 如何使用样式打印HTML
- CSS过渡入门指南
- CSS动画教程
- CSS简介
- CSS指南
- 如何使用PurgeCSS和PostCSS设置Tailwind
- 尾风备忘单
- 如何使用CSS连续旋转图像
- 使用CSS使表响应
- 如何通过二等分来调试CSS
- CSS选择器
- CSS级联
- CSS特异性
- CSS属性选择器
- CSS颜色
- CSS单位
- CSS url()
- CSS排版
- CSS Box模型
- CSS位置属性
- CSS媒体查询和响应式设计
- CSS功能查询
- CSS转换
- 如何使用CSS设置列表样式
- CSS供应商前缀
- CSS继承
- CSS伪类
- CSS伪元素
- 用CSS样式化HTML表
- CSS Display属性
- CSS calc()函数
- CSS边框
- 使用@import导入CSS文件
- CSS错误处理
- CSS过滤器
- CSS Box大小
- CSS背景
- CSS注释
- CSS字体
- CSS填充
- CSS float属性和清除
- CSS规范化
- CSS z-index属性
- 如何使用CSS禁用文本选择
- 如何使用CSS将项目放在其容器的底部
- 如何使用CSS反转颜色
- CSS中的响应式前置标签
- 自适应YouTube视频嵌入
- 响应式设计的良好CSS断点值是多少?
- 如何在Flexbox中对齐中心