admin 管理员组文章数量: 887016
2023年12月18日发(作者：登录界面连接数据库)
第 17
节 CSS
边框与背景[下]
学习要点：
1.设置背景
本章主要探讨 HTML5 中 CSS 边框和背景，通过边框和背景的样式设置，给元素增加
更丰富的外观。
一．设置背景
盒模型的尺寸可以通过两种方式实现可见性，一种就是之前的边框，还有一种就是背景。
CSS
背景设置的样式表如下：
属性 值 说明
CSS
版本
颜色 背景的颜色
background-color 1
background-image 1/3
none
或 url
背景的图片
样式名称 背景图片的样式
background-repeat 1/3
长度值或其他 背景图像的尺寸
background-size 3
位置坐标 背景图像的位置
background-position 1
滚动方式 背景图片的滚动
background-attachment 1/3
裁剪方式 背景图片的裁剪
background-clip 3
位置坐标 背景图片起始点
background-origin 3
复合值 背景图片简写方式
background 1
ound-color
值 说明
CSS
版本
颜色 设置背景颜色为指定色
1
设置背景颜色为透明色
transparent 1
div {
background-color: silver;
}
解释：设置元素的背景颜色。属性值是颜色值。
div b {
background-color: transparent;
}
解释：默认值为 transparent，为透明的意思。这样
的背景色。一般来说这个属性使用频率很低，原因是不需要改变色彩时就默认，需要改变色
彩时又是颜色值。
body {
background-color: silver;
}
解释：在
元素下可以设置整个页面的背景色。
ound-image
值
none
url
说明
取消背景图片的设置
通过 URL
设置背景图片
CSS
版本
1
1
body {
background-image: url();
}
解释：url
里面是图片的路径，设置整个页面以这个图片为背景，如果图片不足以覆盖，
则复制扩展。
div {
background-image: none;
}
解释：如果多个 div
批量设置了背景，而其中某一个不需要背景，可以单独设置 none
值取消背景。
在 CSS3
中，背景图片还设置了比如线性、放射性等渐变方式。但由于支持度的问题，
比如 IE9
尚未支持。我们把这些的新特性放到独立的课程中讲解。
ound-repeat
值
repeat-x
repeat-y
repeat
no-repeat
说明
水平方向平铺图像
垂直方向平铺图像
水平和垂直方向同时平铺图像
禁止平铺图像
CSS
版本
1
1
1
1
body {
background-image: url();
background-repeat: no-repeat;
}
解释：让背景图片只显示一个，不平铺。CSS3
还提供了两个值，由于支持度不佳，这
里忽略。
ound-position
值
top
left
right
bottom
center
长度值
百分数
说明
将背景图片定位到元素顶部
将背景图片定位到元素左部
将背景图片定位到元素右部
将背景图片定位到元素底部
将背景图片定位到元素中部
使用长度值偏移图片的位置
使用百分数偏移图片的位置
CSS
版本
1
1
1
1
1
1
1
body {
background-image: url();
background-repeat: no-repeat;
background-position: top;
}
解释：将背景图片置于页面上方，如果想置于左上方则值为：top left。
body {
background-image: url();
background-repeat: no-repeat;
background-position: 20px 20px;
}
解释：使用长度值或百分数，第一值表示左边，第二个值表示上边。
ound-size
值
auto
cover
contain
说明
默认值，图像以本尺寸显示
等比例缩放图像，使图像至少覆盖容器，但有
可能超出容器
等比例缩放图像，使其宽度、高度中较大者与
容器横向或纵向重合
CSS
版本
3
3
3
长度值
百分数
CSS
长度值，比如 px、em
比如：100%
3
3
body {
background-image: url();
background-size: cover;
}
解释：使用 cover
相当于 100%，全屏铺面一张大图，这个值非常实用。在等比例放大
缩小的过程中，可能会有背景超出，当然，这点无伤大雅。
div {
background-image: url();
background-size: contain;
}
解释：使用 contain
表示，尽可能让图片完整的显示在元素内。
body {
background-image: url();
background-size: 240px 240px;
}
解释：长度值的用法，分别表示长和高。
ound-attachment
值
scroll
fixed
说明
默认值，背景固定在元素上，不会随着内
容一起滚动
背景固定在视窗上，内容滚动时背景不动
CSS
版本
1
1
body {
background-image: url();
background-attachment: fixed;
}
解释：fixed
属性会导致背景产生水印效果，拖动滚动条而背景不动。
ound-origin
值
border-box
padding-box
content-box
说明
在元素盒子内部绘制背景
在内边距盒子内部绘制背景
在内容盒子内部绘制背景
CSS
版本
3
3
3
div {
width: 400px;
height: 300px;
border: 10px dashed red;
padding: 50px;
background-image: url();
background-repeat: no-repeat;
background-origin: content-box;
}
解释：设置背景起始位置。
ound-clip
值
border-box
padding-box
content-box
说明
在元素盒子内部裁剪背景
在内边距盒子内部裁剪背景
在内容黑子内部裁剪背景
CSS
版本
3
3
3
div {
width: 400px;
height: 300px;
border: 10px dashed red;
padding: 50px;
background-image: url();
background-repeat: no-repeat;
background-origin: border-box;
background-clip: padding-box;
}
解释：在内边距盒子内部裁剪背景。
ound
div {
width: 400px;
height: 300px;
border: 10px dashed red;
padding: 50px;
background: silver url() no-repeat scroll left top/100%
border-box content-box;
}
解释：完整的简写顺序如下：
[background-color]
[background-image]
[background-repeat]
[background-attachment]
[background-position] / [ background-size]
[background-origin]
[background-clip];
版权声明：本文标题：CSS边框与背景[下] 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1702841109h432865.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
更多相关文章
验证ssh的两种登录模式
验证ssh的两种登录模式
宇视存储主机VX开局指导书包括VX
宇视存储主机VX开局指导书包括VX
如何实现局域网内的文件共享
如何实现局域网内的文件共享
Philips 8505系列电视用户手册说明书
Philips 8505系列电视用户手册说明书
DELLR920服务器部署ESXI55教程
DELLR920服务器部署ESXI55教程
看高手教你如何用命令行更改IP地址
看高手教你如何用命令行更改IP地址
如何修改IP地址
如何修改IP地址
windows图片查看器背景颜色更改
windows图片查看器背景颜色更改 目录 一． 问题二． 解决 一． 问题 最近在windows的又又又又又一次更新后，不少小伙伴们发现&#x
windows xp桌面图标文字背景不是透明的改透明
1.“我的电脑”--“属性”--“高级”--“（性能）设置”--“视觉效果--自定义--在桌面上为图标标签使用阴影”（确保这个选项被选中）--“确定”&
html内容被背景图片遮住怎么办_div被iframe遮住的几种情况及解决方法
类似结构： 复制代码代码如下:http:caibaojian">> 第一种：透明背景被遮住 当div使用透明的背景时，无论是使用(opacity或者
PPT绘图时背景画布过小怎么办？
PPT绘图是背景画布过小怎么办？ Design -> slide size -> page setup 增加宽度值Powerpoint 会提示你是否改变原来图形的大小，选择否&
【2025】springboot家装一体化服务平台背景（源码+文档+调试+答疑）
目录 一、整体目录（示范）： 文档含项目技术介绍、E-R图、数据字典、项目功能介绍与截图等 二、运行截图 三、代码部分（示范࿰
小白用chatgpt编写python 爬虫程序代码 抓取网页数据(js动态生成网页元素)
jS动态生成，由于呈现在网页上的内容是由JS生成而来，我们能够在浏览器上看得到，但是在HTML源码中却发现不了 一、注意：代码加入了常规的防爬技术 如果
Python实现对12500张猫狗图像的精准分类
微信公众号 关键字全网搜索最新排名 【机器学习算法】：排名第一 【机器学习】：排名第一 【Python】：排名第三 【算法】：排名第四 源|51CTO官
windows 修改背景颜色之后重启又恢复的解决方法
1.winr，输入regedit 2.定位：HKEY_CURRENT_USERControl PanelColors ，找到Windows 3.双击，
发表评论