[Java小工匠]CSS背景1-概述
1、属性说明
1.1、background-image
background-image 属性为元素设置背景图像。 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。 默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。
值 |
说明 |
---|---|
url(URL地址) |
指向图像的路径。 |
none |
默认值。不显示背景图像。 |
inherit |
规定应该从父元素继承 background-image 属性的设置。 |
1.2、background-position
值 |
说明 |
---|---|
left topleft centerleft bottomcenter topcenter centercenter bottomright topright centerright bottom |
如果您仅规定了一个关键词,那么第二个值将是"center"。默认值:left top。 |
x% y% |
第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值,另一个值将是 50%。 |
xpos ypos |
第一个值是水平位置,第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值,另一个值将是50%。您可以混合使用 % 和 position 值。 |
1.3、background-origin
background-origin 属性规定 background-position 属性相对于什么位置来定位。
值 |
说明 |
---|---|
padding-box |
背景图像相对于内边距框来定位。(默认) |
border-box |
背景图像相对于边框盒来定位。 |
content-box |
背景图像相对于内容框来定位。 |
1.4、background-repeat
background-repeat 属性设置是否及如何重复背景图像。默认地,背景图像在水平和垂直方向上重复。
值 |
描述 |
---|---|
repeat |
默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x |
背景图像将在水平方向重复。 |
repeat-y |
背景图像将在垂直方向重复。 |
no-repeat |
背景图像将仅显示一次。 |
inherit |
规定应该从父元素继承 。 |
1.5、background-size
background-size 属性规定背景图像的尺寸。
值 |
描述 |
---|---|
length |
设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。 |
percentage |
以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。 |
cover |
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 |
contain |
把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 |
background-size : 100% 100% 与 cover 和 contain 区别。
100% 100% 图片宽度和高度的比例会被改变,填满盒子。
cover 图片宽度和高度比例不变,填满盒子,超出部分会被裁剪。
contain 图片宽度和高度比例不变,容器内至少有一张完整的图,容器留白区,铺不下的再裁掉。
1.6 background-clip
background-clip 属性规定背景的绘制区域。
值 |
说明 |
---|---|
border-box |
背景被裁剪到边框盒。(默认) |
padding-box |
背景被裁剪到内边距框。 |
content-box |
背景被裁剪到内容距框。 |
1.7 background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动。
值 |
描述 |
---|---|
scroll |
默认值。背景图像会随着页面其余部分的滚动而移动。 |
fixed |
当页面的其余部分滚动时,背景图像不会移动。 |
inherit |
规定应该从父元素继承 background-attachment 属性的设置。 |
1.5 background-color
background-color属性设置一个元素的背景颜色。
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Swoole 5将移除自动添加Event::wait()特性详解
- laravel 数据验证规则详解
- JS操作XML中DTD介绍及使用方法分析
- PHP设计模式之迭代器(Iterator)模式入门与应用详解
- PHP FileSystem 文件系统常用api整理总结
- laravel框架之数据库查出来的对象实现转化为数组
- php apache开启跨域模式过程详解
- laravel5.6实现数值转换
- python中return不返回值的问题解析
- php装饰者模式简单应用案例分析
- php常用日期时间函数实例小结
- PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
- 基于laravel缓冲cache的用法详解
- Python使用sys.exc_info()方法获取异常信息
- laravel通用化的CURD的实现