当前位置：首页 > news >正文

HTML5+Css3（背景属性background）

news 2025/1/12 12:13:37

css背景属性 `background`

1. `background-color`背景颜色

背景颜色可以用“十六进制”、“rgb()”、“rgba()”或“英文单词”表示

2. `background-image:url(路径);`背景图片

也可以写成 background:url();

3. `background-repeat`背景重复

属性值：

    - repeat:x,y平铺（默认）- repeat- x：水平方向平铺- repeat-y：垂直方向平铺- no-repeat：不平铺，(照片不重复)

4. `backgroun-position` 背景图片位置

属性值：backgroun-position：向右移动向下移动 ;
向右移动：可以写向左移动（left），向右移动（right），居中（center）；也可以是像素（具体值），要是是负值表示向左移动
向下移动：可以向上移动（top），向下移动（bottom），居中（center）,也可以是具体值，或者用像素表示，要是负值就是向上移动

他们的组合有：

<!-- 横向居中，竖向居中、顶部、底部 -->backgroun-position: center center ;backgroun-position: center top ;backgroun-position: center bottom ;<!-- 横向向左，竖向顶部、居中、底部 -->backgroun-position: left top ;backgroun-position: left center ;backgroun-position: left bottom ;<!-- 横向向右，竖向顶部、居中、底部 -->backgroun-position: right top ;backgroun-position: right center ;backgroun-position: right bottom ;

5. `backgroun`复合属性

backgroun:url() 平铺照片位置照片大小颜色 ; (位置不固定)

6. `background-attachment` 背景固定，页面滚动

决定背景图像的位置是在“视口”内固定，或者随着它的区块滚动
scroll：默认值。背景图片随着页面的滚动而滚动，相对于元素本身固定，而不是随着它的内容滚动
fixed：此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景不会随着元素的内容滚动
local：背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，同时背景图图片随着页面的滚动而滚动

7. `background-size` 背景尺寸

背景图片的宽高大小

x  y	：	background-size: 100px 200px; （x y 数值，分别表示背景图片宽高大小）
x% y%	：background-size: 50% 20%; （百分比是相对于盒子的宽高而言，）
x auto	：background-size: 100px auto; （是相对于第一个值宽来自动缩放）
contain ：background-size: contain; （背景图片智能改变尺寸以容纳到盒子里）
cover   ：background-size: cover; （背景图片智能改变尺寸以撑满盒子）

8. `background-clip` 设置元素的背景，裁剪

background-clip设置元素的背景(背景图片或颜色)是否延伸到“边框”、“内边距盒子”、“内容盒子”下面

值	说明
border-box	默认值。背景绘制在边框方框内。延伸至边框边缘
padding-box	背景绘制在内边距方框内。延伸至内边距边缘
content-box	背景绘制在内容方框内。仅限于内容区域
text	背景被裁剪成文字的前景色。

9. `background-origin` 背景图片的定位区域

值	描述
padding-box	背景图片的摆放以 padding 区域为参考默认值从边框开始绘制
border-box	背景图片的摆放以 border 区域为参考从内边距开始绘制
content-box	背景图片的摆放以 content 区域为参考从内容区域开始绘制