设置背景图片的用法与注意事项

1.背景图片
background-image:url(“图片路径”) 可以是相对路径和绝对路径
例如：

background-image: url(img/aut.jpg);

2.背景图片重复
默认水平方向和垂直方向都重复
不重复 no-repeat || 水平方向重复 repeat-x || 垂直方向重复 repeat-y
例如：

background-repeat: no-repeat;

3.背景图片位置
background-position:x y
x 代表图片距离盒子最左边的位置
y 代表图片距离盒子最上边的位置
取值：
(1).px
(2).方位词 top bottom right left center
注意：
(1).当取一个值时，默认取得是水平方向的值，
垂直方向默认值是center
(2).px和方位词可以混用
例如：

background-position: 20px 40px;
或者
background-position: left top;
或者
background-position: 20px ;
或者
background-position:center 40px;

复合属性写法
background: 背景图片图片是否重复图片位置/图片大小，背景颜色
注意：
(1). 图片是否重复和图片的位置顺序可以调换
(2). 背景图片背景颜色顺序不可调换
例如：

background: url(img/aut.jpg) no-repeat center/20px ,#000;

4.背景图片固定
background-attachment
取值：默认值 scroll 背景图片跟随滚动条滚动
fixed 背景图片固定在某一个位置
例如：

background-attachment: fixed;

5.背景图片大小
background-size
(1).长度单位
background-size:100%; 一般不使用百分数
注意：背景图片大小100%是相对于图片本身大小的100%，跟设置图片盒子的大小是没有关系的
(2).关键字
cover覆盖，按比例缩放，背景图片会充满整个盒子，超出盒子的部分会隐藏
contain 包含，按比例缩放，在盒子中背景图片显示完整
例如：

background-size:20px;/* 任何长度单位都行*/
或者
background-size:cover/contain ;

6.背景图片从什么位置开始显示
background-origin
取值
border-box 从边框开始显示图片，边框会覆盖在图片上面
padding-box 从内边距开始显示图片
content-box 从内容区显示图片
注意：配合background-position（图片位置）使用时，
图片原始位置由background-origin取值决定
例如：

background-origin: border-box/ padding-box/ content-box;

7.背景图片剪切
background-clip 从什么位置开始剪切图片
注意：剪切时与背景图片从什么位置开始显示有关
取值：
border-box 从边框开始剪切
padding-box 从内边距开始剪切
content-box 从内容区开始剪切
text 当文字颜色为透明时，背景被裁剪为文字的前景色
例如：

background-clip: border-box/padding-box/content-box;

总结

以上就是设置背景图片要用到和要注意的一些事项。

CSS中设置页面背景图片相关推荐

CSS中如何实现背景图片透明并且固定和文字不透明效果
设置背景图片的透明度,并且该背景图片不随鼠标滚动而移动,我们可以使用滤镜filter中的透明度设置opacity,并使用伪类before和定位至于opacity的作用:转化图像的透明程度.值定义转换 ...
CSS中如何制作背景图片半透明但内容不透明的效果
CSS中如何制作背景半透明但内容不透明的效果一.利用伪元素:before添加一个半透明的背景,并利用position定位属性,设置z-index值为-1,显示在下层. css: <style& ...
html5中背景图片的大小怎么调,css中怎么改变背景图片大小？
在CSS中,想要改变背景图片的大小,可以通过设置background-size属性来实现.下面本篇文章就来给大家介绍一下使用background-size属性改变背景图片大小的方法,希望对大家有所帮助 ...
vue打包后CSS中引用的背景图片不显示问题
vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件修改成为如下所示内容: 添加红框中的内容即可 ...
echarts中设置地图背景图片
1.geo设置背景 (设置 color) 官方属性说明实现效果: options配置: options: {tooltip: {triggerOn: `onmousemove`,trigger: ` ...
html设置页面背景图片并禁止页面缩放
示例代码: <!DOCTYPE html> <html lang="zh"> <head><meta ...
uniapp 设置页面背景图片
如果想为整个页面设置背景图片,添加如下CSS即可实现效果: page{height: 100%;background: url('~@/static/imgs/xxx/bg.png'); }
css中设置文字环绕图片,css 设置文字环绕图片
要达到的效果是可以环绕图片最近做的一个项目,有一个具体的要求,是要完成文字对图片的环绕效果,其实不是很难:来做一份随笔,记录一下该做法,大家有什么好的实现方式,也可以互相探讨一下. 这是我自己写的一 ...
css里面设置body背景图片满屏
<!DOCTYPE html> <html><head><meta name="viewport" content="width ...

CSS中设置页面背景图片

设置背景图片的用法与注意事项

总结

CSS中设置页面背景图片相关推荐

最新文章

热门文章