背景图片

设置背景图片只需设置background-image属性，接受url()函数式表示法，可以使用相对路径，如url(img/cat.jpg)。浏览器此时会在保存当前样式表的目录的img子目标中寻找图片。
如果路径以一个斜杠开头，如/img/cat.jpg，则浏览器会在相对于CSS文件所在域的顶级目录的img子目录中寻找图片。

这里也可以使用绝对路径，把协议、域名、路径和文件名都写全。

除了相对路径和绝对路径，加载图片也可以不指向文件，而是在样式表中直接嵌入数据，即数据URI。

由于只把图片设为背景图片，不能达到我们的预期，可以通过相关属性来优化。

背景图片语法

background-repeat属性

默认值为repeat，意思是背景图片要沿x轴和y轴重复；
声明repeat-x或repeat-y来限定图片只沿某个轴的方向重复；
no-repeat完全禁止重复；

支持以空格分隔的针对两个方向的关键字声明语法；
space关键字，如果（未经剪裁和缩放的）背景图片可以在元素内部完全重复两次以上，那么它就会重复相应的次数，重复的图片之间填充空白，从而让第一张和最后一张图片都紧挨着元素的边缘；
round关键字，意味着图片会被缩放，从而切好能在元素中重复整数次。

background-position属性

既可以使用关键字，也可以使用像素、em或百分比。最简单的情况下，可以只给两个值：一个表示相对于左侧的偏移量，一个表示相对于顶部的偏移量。

如果使用像素或em单位来设置背景图片的位置，那么图片的左上角会相对于元素的左上角定位，也就是会偏移指定的数值。

如果设置背景图片的位置时使用了百分比，那么不会定位背景图片的左上角，而是定位图片中对应的点。

使用关键字来对齐背景图片，要在x轴上用left、center或right，在y轴上用top、center或bottom。
新语法允许添加外边空声明，先写边界关键字，再写长度值。

background-clip属性

默认值是border-box，背景被裁剪到边框盒。
padding-box就可以把图片剪裁到内边距盒子以内。
content-box会把图片位于内边距及其之外的部分裁剪掉。

背景定位默认的原点仍然在代码中声明的内边距盒子的左上角。即定位值从元素边框内开始计算。但是，我们可以使用background-origin属性控制原点的位置。

background-origin属性

border-box：背景图像相对于边框盒来定位；
padding-box：背景图像相对于内边距框来定位；
content-box：背景图像相对于内容框来定位。

background-attachment属性

默认值scroll，会让背景图片相对于元素本身固定；
fixed，当页面的其余部分滚动时，背景图像不会移动。
local，会让背景图片相对于元素中的内容固定。

background-size属性

给定明确的值，可以重新设置图片的大小，也可以使用百分比让图片随元素缩放而缩放。

关键字contain，这个值可以让浏览器尽可能保持图片最大化，同时不改变图片的宽高比。
关键字cover，图片会缩放以保证覆盖元素的每一个像素，同时不会变形。

CSS-Learning | background-image属性如何设置背景图片以及相关背景图片语法相关推荐

c语言中边框所占两列一行,css中的border-collapse属性如何设置表格边框线？（代码示例）...
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...
css中background的属性
background-size: contain;/* background-size: 100px 100px; */ 1.background-color:设置盒子的背景颜色: backgroun ...
html鼠标样式怎么去掉,CSS鼠标样式cursor属性怎么设置
CSS鼠标样式可以通过设置cursorg属性,从而达到鼠标在对象上移动的鼠标样式. 一般在网页中一些特殊版块布局时,会遇到这类需求,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cur ...
【CSS】【position】css中的position属性
css中的position属性用于设置元素位置的确定方式,它有以下几种取值: static:默认定位方式,子元素在父容器中挨个摆放 absolute:绝对定位,元素不占据父容器空间,相当于文档body ...
前端基础 CSS 第十一章使用CSS样式表特效属性部分 ----暑假学习第九天
第十一章使用CSS样式表 11.8 定位属性使用定位属性可以控制元素的位置,包括相对定位和绝对定位两种方式.相对定位指允许元素在相对于文档布局的原始位置上进行偏移,而绝对定位是指允许元素与原始文档 ...
html背景图片内填充,CSS基础——使用图片填充元素背景
在网页设计中,使用图片来填充元素背景,可以让元素背景呈现丰富多彩的外观.使用图片填充元素背景的常用样式标签有background-image.background-repeat.background- ...
《Android开发卷——设置圆形头像,Android截取圆形图片》
在有一些程序开发中,有时候会用到圆形,截取一张图片的一部分圆形,作为头像或者其他. 本实例就是截图圆形,设置头像的. 首先讲解一些代码 <ImageView android:id=&q ...
Confluence相关背景知识
2021年4月13日更新最近的confluence停止了对server版的支持,license都是data center的,以往的旧版本只能是cluster模式,这种情况下只需要使用默认的建议安装即 ...
css与背景相关的属性有哪些,css的背景background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) (图 ...

CSS-Learning | background-image属性如何设置背景图片以及相关背景图片语法