分享程序员开发的那些事...
更新时间：2022-09-07 23:13:37
开发者学堂课程【CSS 快速掌握：背景样式属性】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/611/detail/9184
内容介绍
一、表格简介
二、范例：代码演示
属性 |
值 |
含义 |
background-color |
#ff0000、red.rgb(255,0,0) |
背景颜色 |
background-image |
url(图像路径和名称); |
背景图像 |
background-repeat |
repeat、repeat-x、repeat-y、no-repeat |
背景图像是否重复 |
background-position |
center center 或 x% y% 或 xpos ypos |
背景图像起始位置 |
background-attachment |
scroll (滚动)、fixed (固定) |
设置背景图像是否固定或者随着页面的其余部分滚动。 |
background |
url(1.ipga) no-repeat center center fixed |
设器背景的简写形式 |
图中代码如下：
< !DOCTYPE html>
</span><span class="lake-fontsize-1515">背景图片的位置<span>
.box{
width:1000px;height: 600px;
border: 1px solid #000;margin-right: auto;
margin-Left: auto;
background-image: url(./images/1.jpg);I/*让背景图片不平铺*/
background-repeat: no-repeat;
}
图中代码如下：
< !DOCTYPE html>
</span><span class="lake-fontsize-1515">背景图片的位置<span>
.box{
width:1000px;height: 600px;
border: 1px solid #000;margin-right: auto;
margin-Left: auto;
background-image: url(./images/1.jpg);I/*让背景图片不平铺*/
background-repeat: no-repeat;
}
注意：
l background-color: 用于给元素设置背景颜色但是前提这个元素要么有内容，要么有宽度和高度才可以。
l background-position：水平位置 垂直位置 这两个位置的表示方式有三种 英文单词 固定值 百分比 这三种方式可以混合使用 可以同时使用英文单词或者是固定值或者是百分比
l 英文单词的表示方式
l 水平位置：left（居左）, center(居中), right(居右)
l 垂直位置：top（居上）, center(居中), bottom(居下)
l 固定值的表达方式
l 百分比的表达方式
l Background： 简写属性 它可以同时设置多个样式 比如背景颜色，背景图片，背景图片是否平铺 水平位置 垂直位置
l Background：简写属性 其值的个数不定 顺序也不一定 每一个值之前使用空格分隔