CSS 第005 背景-理论
背景属性：background
CSS 背景属性用于定义HTML元素的背景。
背景缩写属性可以在一个声明中设置所有的背景属性。可以设置的属性分别是：
| 值 | 说明 |
|---|---|
| background-color | 指定要使用的背景颜色 |
| background-position | 指定背景图像的位置 |
| background-size | 指定背景图片的大小 |
| background-repeat | 指定如何重复背景图像 |
| background-origin | 指定背景图像的定位区域 |
| background-clip | 指定背景图像的绘画区域 |
| background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动。 |
| background-image | 指定要使用的一个或多个背景图像 |
CSS3 属性定义背景效果
background-color
- background-color属性设置一个元素的背景颜色。
- 元素的背景是元素的总大小，包括填充和边界（但不包括边距）。
颜色值通常以以下方式定义:
- 十六进制 - 如："#ff0000"
- RGB - 如："rgb(255,0,0)"
- 颜色名称 - 如："red"
- background-color 不能继承，其默认值是 transparent。如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才可见。
语法：
background-color:颜色|inherit|transparent;属性值
| 值 | 描述 |
|---|---|
| color | 指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。 |
| transparent | 指定背景颜色应该是透明的。这是默认 |
| inherit | 指定背景颜色，应该从父元素继承 |
background-position
background-position属性设置背景图像的起始位置。
- 注意对于这个工作在Firefox和Opera，background-attachment必须设置为 "fixed（固定）"。
语法
background-position: horizontal【垂直】 vertical【水平】
水平是
percentage | length | left | center | right
垂直是
percentage | length | top | center | bottom 属性值
| 值 | 描述 |
|---|---|
|
left top |
如果仅指定一个关键字，其他值将会是"center" |
|
x% y% |
第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％ |
|
xpos ypos |
第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions |
|
inherit |
指定background-position属性设置应该从父元素继承 |
background-size
指定背景图像的大小
语法
background-size: length|percentage|cover|contain;属性值
| 值 | 描述 |
|---|---|
| length | 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)" |
| percentage | 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)" |
| cover | 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 |
| contain | 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 |
background-repeat
- 设置如何平铺对象的 background-image 属性。
- 默认情况下，重复background-image的垂直和水平方向。
语法
background-repeat：repeat|repeat-x|repeat-y|no-repeat|inherit;属性值
| 值 | 说明 |
|---|---|
| repeat | 背景图像将向垂直和水平方向重复。这是默认 |
| repeat-x | 只有水平位置会重复背景图像 |
| repeat-y | 只有垂直位置会重复背景图像 |
| no-repeat | background-image不会重复 |
| inherit | 指定background-repea属性设置应该从父元素继承 |
background-origin
- background-origin属性指定background-position属性应该是相对位置。
- 注意如果背景图像background-attachment是"固定"，这个属性没有任何效果。
语法
background-origin: padding-box|border-box|content-box;属性值
| 值 | 描述 |
|---|---|
| padding-box | 背景图像填充框的相对位置 |
| border-box | 背景图像边界框的相对位置 |
| content-box | 背景图像的相对位置的内容框 |
background-clip
background-clip属性指定背景绘制区域。
语法
background-clip: border-box|padding-box|content-box;属性值
| 值 | 说明 |
|---|---|
| border-box | 默认值。背景绘制在边框方框内（剪切成边框方框）。 |
| padding-box | 背景绘制在衬距方框内（剪切成衬距方框）。 |
| content-box | 背景绘制在内容方框内（剪切成内容方框）。 |
background-attachment
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
语法
background-attachment:scroll | fixed | inherit |local;属性值
| 值 | 说明 |
|---|---|
| scroll | 背景图片随页面的其余部分滚动。这是默认 |
| fixed | 背景图像是固定的 |
| inherit | 指定background-attachment的设置应该从父元素继承 |
| local | 背景图片随滚动元素滚动 |
background-image
- background-image属性设置一个元素的背景图像。
- 元素的背景是元素的总大小，包括填充和边界（但不包括边距）。
- 默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。
语法
background-image: url('url') | none | inherit;属性值
| 值 | 说明 |
|---|---|
| url('URL') | 图像的URL |
| none | 无图像背景会显示。这是默认 |
| inherit | 指定背景图像应该从父元素继承 |
一直在路上，自律，坚持
CSS 第005 背景-理论相关推荐
- 22.CSS边框与背景【上】
第十七章 CSS边框与背景[上] 一.声明边框 属性 值 说明 CSS版本 1.border-width ...
- php设置背景为透明,css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍...
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
- [09]CSS 边框与背景 (上)
一．声明边框 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 边框的声明有三个属性设置,样式表如下: 属性 值 说明 CSS 版本 border-width 长 ...
- [css] 如何设置背景图片不随着文本内容的滚动而滚动？
[css] 如何设置背景图片不随着文本内容的滚动而滚动? 直接对div设置background:url不就好了嘛?上代码.<!DOCTYPE html> <html lang=&qu ...
- [css] 如何让背景图片固定不随滚动条滚动
[css] 如何让背景图片固定不随滚动条滚动 background-attachment:fixed 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 ...
- [css] 使用css如何设置背景虚化？
[css] 使用css如何设置背景虚化? filter: blur(5px); 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关 ...
- vue样式中背景图片路径_vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了 如一个简单css语句 .all_bg { background: url(../imag ...
- html背景图片垂直居中,css — 定位、背景图、水平垂直居中
css - 定位.背景图.水平垂直居中 目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; s ...
- 怎么把html背景图片,css如何设置背景图片？
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本文就给大家介绍css怎样设置背景图片. css可以通过background-ima ...
最新文章
- mysql通过ssl的方式生成秘钥
- Python从头/尾删除子符串的正确操作
- win7 oracle数据库删除用户名,图文帮你win7系统删除Oracle数据库中的用户的具体方法...
- oracle-DECODE()函数
- 科技感人工智能PPT模板推荐
- 第十一届蓝桥杯 2020年省赛真题 (C/C++ 大学A组) 第一场
- tdr上升时间什么设定_TDR的完整形式是什么？
- TCR历史期刊为何受大家欢迎？
- JAVA萌新入门学习经历
- linux 硬盘报错日志,Linux内核I/O系统报错日志与硬盘故障对应关系
- 一加6可以刷的rom_一加OnePlus 6刷机包_线刷包_救砖包_官方ROM包_固件包下载- 线刷宝ROM中心...
- ILRuntime热更的小技巧
- windows系统信息修改
- jira是干什么_JIRA是什么？
- git拉取远程新分支到本地
- 我国2016研发的超级计算机,我国超级计算机研制取得重大突破
- 前端实习生笔试_百度实习生招聘笔试题-web前端开发
- Web安全之CTF测试赛
- Android Studio TCP客户端实现
- 使用Qt实现一个图像处理软件0