background背景、背景图片

企业开发 2023-09-19 10:35:47 阅读次数: 0

背景 ( Background )

background@3

属性描述： 设置或获取对象的背景特性

版本变更： 是

语法模板：

background：[ <bg-layer>, ]* <final-bg-layer>

<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>

<final-bg-layer> = <bg-image> || <position> [ / <bg-size>@3 ]? || <repeat-style> || <attachment> || <box>@3 || <box>@3 || <background-color>

默认值： 根据每个独立属性设置

属性值描述：

<background-image>：指定对象的背景图像，可以是真实图片路径或使用渐变创建的“背景图像”;

<background-position>：指定对象的背景图像位置;

<background-repeat>：指定对象的背景图像如何铺排填充;

<background-attachment>：指定对象的背景图像是随对象内容滚动还是固定的;

<background-color>：指定对象的背景颜色;


/***css3中添加的新属性***/


<background-size>：指定对象的背景图像的尺寸大小;

<background-origin>：指定对象的背景图像显示的原点;

<background-clip>：指定对象的背景图像向外裁剪的区域;

适用元素： 所有元素

是否具有继承性： 否

是否具有动画性： 根据每个独立属性设置

脚本接口： 无

注意事项：

  • 一个元素可以设置多重背景图像
  • 每组属性间使用逗号分隔
  • 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上
  • 背景色<background-color>不能设置多组

background-color

属性描述： 设置或获取对象的背景颜色

语法模板：

background-color：<color>

默认值： transparent

属性值描述：

<color>：指定颜色;

适用元素： 所有颜色

是否具有继承性： 否

是否具有动画性： 是

脚本接口： backgroundColor

注意事项：

  • 当同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上
  • 如果设置了 <background-image>，同时也建议设置<background-color>用于当背景图像不可见时保持与文本颜色有一定的对比度

background-image

属性描述： 设置或获取

语法模板：

background-image：url(" <bg-image> [ , <bg-image> ]* ");

默认值： none

属性值描述：

none：无背景图;

<image>：使用绝对或相对地址指或者创建渐变色来确定图像;

适用元素： 所有元素

是否具有继承性： 否

是否具有动画性： 否

脚本接口： backgroundImage

例如：-background:url(“1.png”) 200px 200px / 100px no-repeat red;

​ 前面是position / 后面是repate

注意事项：

  • 如果设置了 <background-image>，同时也建议设置 < background-color> 用于当背景图像不可见时保持与文本颜色有一定的对比度
  • 如果定义了多组背景图，且背景图之间有重叠，写在前面的将会盖在写在后面的图像之上
  • url中可以存放地址或图片，当图片名称中有特殊符号时必须写单/双引号
  • 可以同时设置多个图片，但背景颜色只能有一个
  • url函数必不可少，用来存放地址或图片，当图片名称中有特殊符号时必须写引号，单引号也可以。

background-repeat@3

属性描述： 设置或获取对象的背景图像如何铺排填充，必须先指定 <background-image> 属性

语法模板：

background-repeat：<repeat-style> [ , <repeat-style> ]*

<repeat-style> = repeat-x | repeat-y | [repeat | no-repeat | space@3 | round@3 ]{
    
    1,2}

默认值： repeat

属性值描述：

repeat：背景图像在横向和纵向平铺;

repeat-x：背景图像在横向上平铺;

repeat-y：背景图像在纵向上平铺;

no-repeat：背景图像不平铺;

/***css3中添加的新属性***/

round：背景图像自动缩放直到适应且填充满整个容器;

space：背景图像以相同的间距平铺且填充满整个容器或某个方向;

适用元素： 所有元素

是否具有继承性： 否

是否具有动画性： 否

脚本接口： backgroundRepeat

注意事项：

  • 允许提供2个参数，如果提供全部2个参数，第1个用于横向，第二个用于纵向。
    如果只提供1个参数，则用于横向和纵向。特殊值repeat-x和repeat-y除外，因为repeat-x相当于repeat no-repeat，repeat-y相当于no-repeat repeat，即其实repeat-x和repeat-y等价于提供了2个参数值

    • round 只要设定了该值，则表明开启了repeat，如果图像绘制完毕以后，在某个轴上的剩余空间小于图像设定尺寸的一半，那么该轴上的图像数量将保持不动，并且图像在该轴方向上的尺寸将会放大，并且填充完整这个该轴的整个长度。反之（大于），图像数量加一，图像尺寸缩小，并填充完整；

    • space 根据设定的图像尺寸来决定某个轴上最多能存放几张图片，该轴方向上剩余的空间平均的分配到图像之间的间距上；

    • cover那么我们的图像必须要覆盖整个容器空间，当图像宽高不同时，我们需要将图像容器的宽高中的最大值，允许图像溢出，在整个过程中，图像必须保持宽高比；

    • contain 当图像的宽高比不同时，与cover正好相反，我们取宽高中的最小值；

现象：

  • 当repeat为round，size为contain时，图像的宽高比会改变，当某个轴的长度小于另一个轴的三分之二时，将该轴的长度分别平均分配给两张图片；

  • 当repeat为round，size为cover时，图像将会百分百的铺满整个容器，并且容器的宽高就是图像的宽高，该情况下，宽高比会发生改变；

background-size@3

属性描述： 设置或获取对象的背景图像的尺寸大小

语法模板：

background-size：<bg-size> [ , <bg-size> ]*

<bg-size> = [ <length> | <percentage> | auto ]{
    
    1,2} | cover | contain

默认值： auto

属性值描述：

<length>：用长度值指定背景图像大小，不允许负值;可以是两个值，用空格分隔；若只有一个值，表示宽度，高度根据图片的宽度来等比缩放；

<percentage>：用百分比指定背景图像大小，不允许负值;

auto：背景图像的真实大小;

cover：将背景图像等比缩放到完全覆盖容器，取宽高中最大值等比缩放图像，背景图像有可能超出容器，超出部分自动隐藏，

contain：中文包含，覆盖整个容器，取宽高中最小值等比缩放图像，背景图像始终被包含在容器内，IE不支持

适用元素： 所有元素

是否具有继承性： 否

是否具有动画性： 是，除使用值为关键字外

脚本接口： backgroundSize

注意事项：

  • 该属性提供2个参数值(特性值cover和contain除外)
  • 如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度。
  • 如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放

现象：

  • 当repeat为round，size为contain时，图像的宽高比会改变，当某个轴的长度小于另一个轴的三分之二时，将该轴的长度分别平均分配给两张图片；
  • 当repeat为round，size为cover时，图像将会百分百的铺满整个容器，并且容器的宽高就是图像的宽高，该情况下，宽高比会发生改变；

background-attachment@3

属性描述： 设置或获取背景图像是随对象内容滚动还是固定的

版本变更： 是

语法模板：

background-attachment：<attachment> [ , <attachment> ]*

<attachment> = fixed | scroll | local@3

默认值： scroll

属性值描述：

fixed：背景图像相对于窗体固定，类似于固定定位;

scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。即图像子元素不跟父元素滚动，但会随元素的祖先元素或窗体一起滚动;

local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。即图像子元素跟父元素滚动。

适用元素： 所有元素

是否具有继承性： 否

是否具有动画性： 否

脚本接口： backgroundAttachment

注意事项： 必须先指定<background-image>属性

overflow:scroll; 超出部分，产生滚动条

background-position

属性描述： 设置或获取对象的背景图像位置

语法模板：

background-position：<position> [ , <position> ]*

<position> = [ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]

默认值： 0% 0%，效果等同于left top

属性值描述：

<percentage>：用百分比指定背景图像填充的位置，可以为负值;

<length>：用长度值指定背景图像填充的位置，可以为负值;
		  若只有一个值，表示x轴，另一个值默认为center;
		  若第一个值描述值，是百分比，数值都作为x轴，描述值可能为y轴；

center：背景图像横向和纵向居中，等同于50% 50%;

left：背景图像在横向上填充从左边开始;

right：背景图像在横向上填充从右边开始;

top：背景图像在纵向上填充从顶部开始;

bottom：背景图像在纵向上填充从底部开始;

适用元素： 所有元素

是否具有继承性： 否

是否具有动画性： 是

脚本接口： backgroundPosition

注意事项：

  • 如果提供两个，第一个用于横坐标，第二个用于纵坐标
  • 如果只提供一个，该值将用于横坐标；纵坐标将默认为50%（即center）
  • 如果提供四个，每个<percentage>或<length>偏移前都必须跟着一个关键字（即left | center | right | top | bottom），偏移量相对关键字位置进行偏移

abckground-position

默认值为0*0，若只有一个值，另一个值默认为center；

如果只有一个值，表示x轴，

若第一个值不是描述值，是百分比，数值都作为x轴，描述值可能是y轴

background-origin@3

属性描述： 设置或获取对象的背景图像计算 <background-position> 时的参考原点(位置)

语法模板：

background-origin：<box> [ , <box> ]*

<box> = border-box | padding-box | content-box

默认值： padding-box

属性值描述：

padding-box：从padding区域（含padding）开始显示背景图像;

border-box：从border区域（含border）开始显示背景图像;

content-box：从content区域开始显示背景图像;

适用元素： 所有元素

是否具有继承性： 否

是否具有动画性： 否

脚本接口： backgroundOrigin

background-clip@3

属性描述： 设置或获取对象的背景图像向外裁剪的区域

语法模板：

background-clip：<box> [ , <box> ]*

<box> = border-box | padding-box | content-box

默认值： border-box

属性值描述：

padding-box：从padding区域（不含padding）开始向外裁剪背景;

border-box：从border区域（不含border）开始向外裁剪背景;

content-box：从content区域开始向外裁剪背景;

适用元素： 所有元素

是否具有继承性： 否

是否具有动画性： 否

脚本接口： backgroundClip

绘制参考原点

background-origin:border-box;
background-clip:padding-box;<!--从哪个位置上开始显示-->

background-image: radial-gradient(250px 250px at 100px 100px,red yellow);	x主半径，y次半径，at，x轴，y轴，颜色

background-image: radial-gradient(closest-size ellipse at 100px 100px,red yellow);
closest-size  从圆心点开始，一直到最近的边作为渐变的半径
closet-corner 从圆心点开始，一直到最近的角作为渐变的半径
farthest-size	从圆心点开始，一直到最远的边作为渐变的半径
farthest-corner  从圆心点开始，一直到最远的角作为渐变的半径
circle正圆		 ellipse椭圆
注意：这些值不可以采用固定半径值来设置，只能给形状

repeating-radial-gradient

猜你喜欢

转载自blog.csdn.net/Sandersonia/article/details/132262247
今日推荐
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
周排行
Family Tree 题解
BZOJ 1093 最大半连通子图 SCC + DP
幂等处理
Spring----学习（2）----XML 配置Bean 自动装配
SQL Server 远程更新目标表数据
HIbernate3.6 环境搭建
特殊符号正则表达式
【Linux】第一章 进程的理解
843. n-皇后问题（dfs+输出各种情况）
空间数据库2
每日归档
更多
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022