当前栏目
background-image使用
目录
background-image: url(" ");
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)
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件