css3 背景属性

news/2024/11/8 15:02:07/

CSS 背景属性用于定义HTML元素的背景。CSS背景属性有:background-color、background-image、background-position、background-size、background-repeat、background-attachment、background-origin、background-clip。

下面来看看各个属性的使用:

1、background-color

background-color 属性定义了元素的背景颜色。在CSS中,颜色值通常以以下三种方式定义:
1、十六进制 - 如:“#ff0000”
2、RGB - 如:“rgb(255,0,0)”
3、颜色名称 - 如:“red”

background-color:#b0c4de;
background-color:rgb(0, 128, 255);
background-color:red;
2、background-image

background-image 属性描述了元素的背景图像。默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体。

background-image:url('paper.gif');
3、background-position

background-position属性设置背景图像的起始位置。这个位置是相对于由 background-origin 定义的位置图层的。

/* Keyword values */
background-position: top;
/* equal to first */
background-position: top center;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;/* <percentage> values */
background-position: 25% 75%;/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;/* Multiple images */
background-position: 0 0, center;/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;/* Global values */
background-position: inherit;
background-position: initial;
background-position: revert;
background-position: unset;
4、background-size

background-size 设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

如果属性值为auto,则以背景图片的比例缩放背景图片。

如果属性值为cover,则缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。和 contain 值相反,cover 值尽可能大的缩放背景图像并保持图像的宽高比例(图像不会被压扁)。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时,背景图的 左/右 或者 上/下 部分会被裁剪。

如果属性值为contain,则缩放背景图片以完全装入背景区,可能背景区部分空白。contain 尽可能的缩放背景并保持图像的宽高比例(图像不会被压缩)。该背景图会填充所在的容器。当背景图和容器的大小的不同时,容器的空白区域(上/下或者左/右)会显示由 background-color 设置的背景颜色。

如果属性值为数字长度,则指定背景图片大小。
如果属性值为百分比长度,则指定背景图片相对背景区(background positioning area)的百分比。背景区由background-origin设置,默认为盒模型的内容区与内边距,也可设置为只有内容区,或者还包括边框。如果attachment 为fixed,背景区为浏览器可视区(即视口),不包括滚动条。不能为负值。

/* 关键字 */
background-size: cover
background-size: contain/* 一个值:这个值指定图片的宽度,图片的高度隐式的为 auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto/* 两个值 */
/* 第一个值指定图片的宽度,第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto/* 逗号分隔的多个值:设置多重背景 */
background-size: auto, auto     /* 不同于 background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;
5、background-repeat

background-repeat CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。

如果属性值为space,则图像会尽可能得重复,但是不会裁剪。第一个和最后一个图像会被固定在元素 (element) 的相应的边上,同时空白会均匀地分布在图像之间。background-position属性会被忽视,除非只有一个图像能被无裁剪地显示。只在一种情况下裁剪会发生,那就是图像太大了以至于没有足够的空间来完整显示一个图像。

如果属性值为round,则随着允许的空间在尺寸上的增长,被重复的图像将会伸展 (没有空隙), 直到有足够的空间来添加一个图像。当下一个图像被添加后,所有的当前的图像会被压缩来腾出空间。例如,一个图像原始大小是 260px, 重复三次之后,可能会被伸展到 300px, 直到另一个图像被加进来。这样他们就可能被压缩到 225px.

/* 单值语法 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;/* 双值语法:水平 horizontal | 垂直 vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;background-repeat: inherit;
6、background-attachment

background-attachment CSS 属性决定背景图像的位置是在视口内固定,或者随着包含它的区块滚动。

background-attachment的属性值常用的有三个:

fixed:此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。

local:此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动,并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

scroll:此关键属性值表示背景相对于元素本身固定,而不是随着它的内容滚动(对元素边框是有效的)。

/* 关键 属性值 */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;/* 全局 属性值 */
background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;
7、background-origin

background-origin 规定了指定背景图片background-image 属性的原点位置的背景相对区域。当使用 background-attachment 为 fixed 时,该属性将被忽略不起作用。

/* 背景图片的摆放以 border 区域为参考 */
background-origin: border-box
/* 背景图片的摆放以 padding 区域为参考 */
background-origin: padding-box
/* 背景图片的摆放以 content 区域为参考 */
background-origin: content-boxbackground-origin: inherit
8、background-clip

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

/* Keyword values */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;/* Global values */
background-clip: inherit;
background-clip: initial;
background-clip: unset;

background-origin属性和background-clip属性乍一看上去很相似,但是它们的原理却不一样。关于background-origin属性和background-clip属性的区别,可以参考这一篇文章,写的非常好!

9、background *****(重要)

background 是一种 CSS 简写属性,用于一次性集中定义各种背景属性,包括 color, image, origin 与 size, repeat 方式等等。

如果需要设置background属性的值,可以按照background-color、background-image、background-position、background-size、background-repeat、background-attachment、background-origin、background-clip的顺序依次书写对应属性的值。

注意:background-size只能紧接着background-position出现,用"/“分割。比比如"center/80%”。还有在书写background-origin、background-clip这两个值时,如果只出现一个值,则同时设定 background-origin 和 background-clip,比如如果设置background值只出现一个border-box,则同时设置background-origin 和 background-clip为border-box。

background: red url("demo.png") left top/100px 100px repeat scroll border-box;background: url("demo.png") left top;background: url("demo.png") center/80% no-repeat;

http://www.ppmy.cn/news/806687.html

相关文章

git轻量级服务器gogs

确保本真机已启动sshd服务 sudo apt install openssh-server -y sudo systemctl start sshgogs部署 启动 sudo docker stop gogs; sudo docker rm gogs; rm -fr /build/gogs_data/*; sudo docker run --namegogs -p 10022:22 -p 10880:3000 -v /build/gogs_data:/data …

Coggle 30 Days of ML (23年7月)任务二:数据可视化

Coggle 30 Days of ML (23年7月&#xff09;任务二&#xff1a;数据可视化 任务二&#xff1a;对数据集字符进行可视化&#xff0c;统计标签和字符分布 说明&#xff1a;在这个任务中&#xff0c;需要使用Pandas库对数据集的字符进行可视化&#xff0c;并统计数据集中的标签和…

php程序员用win本还是mac,程序员买电脑买Windows还是苹果的

我是一名大一学生&#xff0c;原本想买一台Thinkpad的&#xff0c;但我哥说还不如买一台苹果&#xff0c;以后开发也是大多用苹果电脑。希望大家推荐(有点小白&#xff0c;但还是希望大家指点一下)我是一名大一学生&#xff0c;原本想买一台Thinkpad的&#xff0c;但我哥说还不…

华为MatebookD装华为MatebookDwin10PROx专业版的教程

以下教程适用于动手能力厉害的花粉&#xff0c;能力不够的仅供参考。 第一步 准备工作。首先我们需要的工具有&#xff1a;8G优盘一个,华为MatebookDwin10PROx专业版镜像 镜像下载地址&#xff1a; 第二步 下载好&#xff0c;华为MatebookDwin10PROx专业版镜像写入8GU盘&#…

mac可以只安装win10系统吗,2023年 Macbook Air 全格单独安装win10教程

说明&#xff1a; 1、以下介绍mac book air 13寸单独安装win10系统的方法&#xff0c;不是双系统&#xff0c;即全盘格式化只安装win10系统 2、安装之前请做好相应的备份操作&#xff0c;避免重要数据丢失&#xff0c;如果要换回MAC OS&#xff0c;需要制作或购买苹果启动盘重…

苹果笔买原装的还是随便买?好用又便宜的平替电容笔

如今&#xff0c;电容笔在网上办公室、网上教育等行业都很受欢迎&#xff0c;平替电容笔会取代苹果原装的电容笔吗&#xff1f;事实上&#xff0c;你完全没有必要花费大量的金钱来购买一支原装的苹果电容笔。一支普通的平替式电容笔也就一百到二百块钱&#xff0c;比起苹果的电…

获追捧的 Win10 精简 “魔改版”OS, 被微软封杀!

点击“开发者技术前线”&#xff0c;选择“星标????” 让一部分开发者看到未来 编辑&#xff1a;可可 开发者技术前线综合 在近二十年里&#xff0c;世界各地的国家或城市政府不断地高调宣布拥抱开源&#xff0c;想用 Linux 系统取代 Windows&#xff0c;希望能借此减少 IT…