html盒子背景图片路径,CSS3-背景

复合属性

background

复合属性书写顺序不限，没被设置的值认为是默认值，需要做兼容的属性也可以在之后单独设置。

Q1：bg-size必须写在bg-position之后，并用斜杠分开

Q2：origin和clip如果只设定了一个值则同时应用在两个属性上，如果设定了两个值，则前者为origin，后者为clip

背景颜色

background-color

① 默认值为transparent(透明)，不具备继承性(带有默认样式的元素背景由浏览器自定义修改，可以由bg-color:initial恢复默认)

② 当与bg-image同时定义时，颜色永远被图片覆盖

③ rgba()、hlsa()、correntcolor设置半透明背景色

④ 不能单独应用CSS3渐变色彩值,linear-graduent(color1,color2)对应的属性时bg-image

背景图像

background-image

① 设置背景图资源，默认值为none

② 这里的图像资源，不单单指通常意义上理解的“图片”(jpg、png···)，而是CSS拟定的图像类模型的资源(渐变)

bg-image的设定方法

url() → 绝对或相对地址制定背景图像

url() → Base64编码设置背景图像

往往是很小的图片(例如平铺背景图)会用第二种方式，其目的是减少页面http请求数

gradient() → 指定各种渐变形式作为背景图

目前包括linear-gradient、repeating-linear-gradient、radial-gradient、repeating-radial-gradient(线性渐变、镜像渐变)

登陆腾讯云中云的小图标不是base编码，而是一种svg文件

url(1),url(1),url(1) → 群组值设置多重背景资源

群组值叠盖关系：前者叠加在后者之上，以此类推

实例：设置渐变背景图

方法：引入背景图片以后在其上覆盖一个渐变背景图

.box{

background-image:radial-gradient(transparent 30%,black 60%),url(image.jpg)

}

背景图像如何铺排填充

background-repeat

bg-repeat的值

repeat(默认)水平垂直方向均平铺图像

repeat-X 水平方向平铺图像

repeat-Y 垂直方向平铺图像

no-repeat 图像不平铺

space图像以相同间距平铺并填满容器的某个方向

① 图像本身保持原尺寸不变

② 用等分间距来控制背图平铺，以容器四周边缘为基准对齐，多出来的空间由空白代替

round图像自动缩放直到自定义充满整个容器

图像根据需求自适应缩放(不同浏览器判断可能会有差异)

缩放并不是等比关系，图片可能变形

CSS3的变化

① 允许提供两个参数：第一个定义水平，第二个定义垂直

② repeat-X和repeat-Y无法与其他值搭配使用

③ 主要用于新增值space和round的搭配控制

背景图像随内容滚动或者固定

background-attachment

background-attachment的值

scroll(默认值)

背景图相对于元素自身固定，元素移动背景移动

fixed

背景图相对于浏览器窗口固定

overflow设置溢出auto哪个方向溢出就增加一个滚动条

local背景图相对于元素里面的内容固定，元素内容移动背景图跟着移动

实例：翻滚的可乐罐

外部有一个容器实现滚动效果

里面有一个容器装透明的罐子图片

容器需要有一个固定的罐子背景

背景图像的位置

background-position

值的范围

关键词

偏移量

值的设定

CSS：可以设定两个值，分别代表水平距离坐标和垂直距离坐标

只写一个值，默认第二个值为center

可以设置负值

CSS3：设定四个值

关键词+偏移量 两个值为一组，代表一个方向

偏移量前必须有关键词

相关属性

background-position-x

background-position-y

兼容性不好，一般也用不上

实例：自适应拉伸的带背景文本域

容器尺寸可变化

背景图相对融合其固定

背景图起始点

background-origin

background-origin用于指定背景图的起始位置在盒模型的哪个盒子中

属性的值：三个盒子

content-box 内容盒子

padding-box 内边距

border-box 边框

①当bg-attachment的值为fixed时无效

②对bg-color无效

背景图裁剪

background-clip

① 对背景色、渐变值、背景图均有效

② 裁剪范围是被覆盖区域之外的范围，因此图像可视区域会变小而非移动位置

③对文档的根元素无效(当的属性未设置时，往往是被默认的值)

属性的值

border-box 默认值，背景覆盖整个盒子区域

padding-box 背景仅覆盖padding区域

content-box 背景仅覆盖content区域

text webkit引擎下的特有值，背景仅覆盖文字区域

实例：边框半透明弹窗

text值的用法

在webkit引擎下，可以定义值为text，让裁剪区域限制于容器中的文本内，让背景图呈现在文本区域内，实现用图像来填充文本的效果

需要使用webkit写法来描述属性

-webkit-background-clip: text;//图片裁剪在文字内

-webkit-text-fill-color: transparent;//文本文字透明

实例：虚线相框

虚线的设置

照片的定位

用clip实现背景图区域的设置

用origin控制背景图起始点

用position精确控制图片位置

背景图像的尺寸大小

background-size

属性的值

auto 默认值，保持背景图的原始高度和宽度

数值(带单位) 定义背景图具体的宽度和高度，允许设置一个值或两个值(第一个值代表宽度，第二个值代表高度，只写一个值时宽度为设定宽度，高度为根据设定的宽度等比设置的高度)

% 定义背景图的百分比大小，允许设置一个值或两个值

cover 背景与会根据需要等比缩放，以实现覆盖容器背景区域(背景图像可能超出容器)

contain 将背景图等比缩放到与容器宽度或高度相等(背景图在容器内)

① 允许设定一个值或两个值

一个值

两个值

② 不能设置负值

③ cover与contain的异同

同

异

④ 当一个图片要在背景中完整呈现又被铺满时，设置宽高均为百分之百