background-image使用

background-image: url(" ")；

background-repeat属性（背景平铺）

background-size属性（设置背景图片大小）

background-position属性（背景图片位置）

1.background-image: url(" ") ;

首先要知道background-image是将图片作为背景，使用方法为：

background-image: url("") ;

其次是关于图片路径问题，

如果该css文件和背景图片在同一文件夹存在且并不包含于其他文件夹那么直接填写back.jpg；background-image:url(back.jpg);

如果该css文件和背景图片在同一文件夹存在且图片包含于其他文件夹（ws）那么填写ws/back.jpg; background-image:url(ws/back.jpg);

如果该css文件和背景图片不在同一文件夹下，（背景图片在demo文件下，而demo文件夹和css文件所在文件夹并列）那么填写../demo/back.jpg;

background-image:url(../demo/back.jpg);

对于css文件所在目录来说：

“../”表示上一级目录开始
“./”表示当前同级目录开始
“/”表示根目录开始。
“../../ ”表示源文件所在目录的上上级目录

例如：

background-image: url("../assets/back1.jpg") ;
我想要用back1这张图片，这张图片在assets文件里，css文件在components文件里，可以看到 assets文件和components文件属于同级目录，所以路径就是： url("../src/assets/back1.jpg")

2.然后就是一些与之相关的其他属性：

background-repeat属性（背景平铺）

repeat 默认值，在水平方向和垂直方向都重复（默认值）
no-repeat 不重复背景图像
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直方向会重复背景图像

background-size属性（设置背景图片大小）

例如：

.body{width: 100%;height: 100%;background-image: url("../assets/back1.jpg") ;background-size: 200px 80px;
}
这里的宽为200px，高为80px也可以将大小设置为百分比（百分比：background-size:40% 60%;不过需要注意的是，图片大小不是按背景图片大小的百分数来计算的，而是装载背景图的元素的百分比来计算。）还可以是cover和contain。
cover：保持图像的宽高比例，将图片缩放到正好完全覆盖定义的背景区域，其中有一边和背景相同contain：保持图像的宽高比例，将图片缩放到宽或者高正好适应定义背景的区域，但背景仍在定义的区域之内，被包含

background-position属性（背景图片位置）

有三种方法：

x(长度）y(长度）
第一个值是水平位置，第二个值是垂直位置。左上角是0。单位可以是像素（0px 0px）或任何其他 css单位。如果仅指定了一个值，其他值将是50％。将背景图像的左上角，放置在对象背景区域（x,y）所指定的位置，即定义的是背景图片的左上角相对于背景区域左上角的偏移量

x% y% 第一个值是水平位置，第二个值是垂直位置。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。默认值为：0％0％

直接指定位置（center、top、bottom、left、right）

background-image使用相关推荐

css的background
背景属性--background是css中的核心属性.你应该对它有充分的了解.这篇文章详细讨论了background的所有相关属性,甚至包括background-p_w_upload,还为我们介绍了它 ...
CSS 背景(background)（背景颜色color、背景图片image、背景平铺repeat、背景位置position、背景附着、背景简写、背景透明、链接导航栏综合案例）
1. 背景颜色(color) background-color:颜色值; 默认的值是 transparent 透明的示例代码: <!DOCTYPE html> <html lang ...
CSS background 之设置图片为背景技巧
首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用): background-color 背景颜色 background-image 背景图片 ba ...
R语言ggplot2在可视化图像中添加横线并在横线中添加文本、为横线中添加的文本添加文本框、自定义文本框的填充色（background color for a text annotation）
R语言ggplot2在可视化图像中添加横线并在横线中添加文本.为横线中添加的文本添加文本框.自定义文本框的填充色(background color for a text annotation) 目录
R语言使用magick包的image_border函数和image_background函数自定义图像的边界和背景（Change image border and background）
R语言使用magick包的image_border函数和image_background函数自定义图像的边界和背景(Change image border and background) 目录
R语言ggplot2可视化自定义可视化结果的背景色（background color）实战：改变整个画板（panel）的背景色、改变图像（plot）区域的背景色
R语言ggplot2可视化自定义可视化结果的背景色(background color)实战:改变整个画板(panel)的背景色.改变图像(plot)区域的背景色目录
Python使用matplotlib绘制透明背景的可视化图像并保存透明背景的可视化结果（transparent background）
Python使用matplotlib绘制透明背景的可视化图像并保存透明背景的可视化结果(transparent background) 目录
Python使用matplotlib可视化自定义背景色实战：自定义可视化图像的背景色（Background Color）
Python使用matplotlib可视化自定义背景色实战:自定义可视化图像的背景色(Background Color) 目录
css规则中区块block,css常用属性总结：背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
iOS9 This application is modifying the autolayout engine from a background thread, which
以前在Xcode7之间项目没有问题,但是使用Xcode7后突然不好使了,This application is modifying the autolayout engine from a back ...

background-image使用

1.background-image: url(" ") ;

background-repeat属性（背景平铺）

background-size属性（设置背景图片大小）

background-position属性（背景图片位置）

background-image使用相关推荐

最新文章

热门文章