如何给HTML文件加一张背景图,如何在css中添加背景图?
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片。
css background属性就是专门设置背景的属性,可以设置背景色,也可以设置背景图片。
下面看看background可以设置的属性:background-color: 规定要使用的背景颜色。
background-position: 规定背景图像的位置。
background-size: 规定背景图片的尺寸。
background-repeat :规定如何重复背景图像。
background-origin :规定背景图片的定位区域。
background-clip: 规定背景的绘制区域。
background-attachment: 规定背景图像是否固定或者随着页面的其余部分滚动。
background-image :规定要使用的背景图像。
可以看出background-image属性就是给html页面设置背景图片的属性,下面看看它的用法background-image:url(1.jpg);
这样在url()里给出图片的路径,就可以给div盒子设置一个背景图片;看似简单,但有一点要注意,设置背景图片的盒子必须要有实质的宽度与高度,这样才可以让背景图片在显示屏上显示。
上面的这些background属性如果一个一个的设置是不是感到繁琐,其实有些属性是可以放在一起设置的,这样的css背景表达可以节约且优化了css文件代码。例:background:url(bgimg.gif) no-repeat 5px 5px;
css设置背景图片的代码实例
1.css设置背景图片自适应全屏
背景图片设置
.demo{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
zoom: 1;
background-color: #fff;
background: url(2.png);
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
效果图:
如何给HTML文件加一张背景图,如何在css中添加背景图?相关推荐
- 前端背景图放置_如何在css中添加背景图?
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片. css background属性就是专门设 ...
- wordpress 背景_如何在WordPress中添加全屏背景图片
wordpress 背景 Full screen background image seems to be a new design trend that is becoming fashionabl ...
- java怎么设置背景_如何在Java中设置背景图片?
小编典典 根据应用程序或小程序是使用AWT还是Swing,答案会略有不同. (基本上,以J诸如JApplet和JFrame为开头的类是Swing和Appletand Frame是AWT.) 无论哪种情 ...
- CSS中添加背景图+盒子边框样式
background-image背景图 *设置图片为背景.* background-image:url("图片路径"): background-size :设置背景图片的大小 属性 ...
- matplotlib 一张图多个图,如何在Matplotlib中绘制同一个图上的多个函数?
How could I plot the following 3 functions (i.e. sin, cos and the addition), on the domain t, on the ...
- 店铺首页图片css,店铺装修-CSS中的背景样式
本篇教程学习的是店铺装修-CSS中的背景样式,喜欢的一起来学习吧. 那我们开始今天的教程吧. 1.在[窗口]-[CSS设计器]添加[在页面中定义],添加一个新的类,[布局]里面有两个重要的东西,一个是 ...
- 简历背景图片设置html代码,怎么在简历中添加背景图片
在简历中添加背景图片的方法二 步骤1.在菜单栏选择图片->自来文件->选择图片后->确定; 步骤2.选图片->右键-->设置图片格式->版式->衬于文字下方; ...
- 如何在eclipse制作的APP中添加背景图
如何在eclipse制作的APP中添加背景图 1.首先把图片拉入drawable-hdpi中,a1.jpg(注:图片名不可为中文) 2.在.xml文件中加入android:background=&qu ...
- Qt中添加背景图片的方法
Qt中添加背景图片的方法 QPalette的方法 #include #include int main(int argc, char *argv[]) { QApplication app(argc, ...
最新文章
- 项目开发过程中的收获与思考
- 涌进体制的技术人:Nature 发文硕士回乡当公务员
- android入门学习一 基本概念
- 云服务双十一大促,最后选手阿里云上场!没有让等到最后的用户失望!
- SEO优化技巧之Alt标签的使用方法
- 吴恩达机器学习笔记_第三周
- Hyperopt中文文档:FMin
- HDU-4282 A very hard mathematic problem 技巧枚举+二分
- php7 字符串,php7 参数、整形及字符串处理机制修改实例分析
- php月历,PHP生成月历代码
- mysql error 1017_[转载]解决 mysql ERROR 1017:Can t find file解决错误
- 装linux系统为什么会黑屏_Ubuntu安装时出现黑屏问题的解决
- springboot利用拦截器和过滤器获取post请求参数
- html js post提交表单,JavaScript 实现POST方式提交表单
- Php—— 1.apache2.4.x+php7.x
- .mat转.tif 用于arcgis裁剪遥感图像
- Learning Git Branching
- 关于调用Excel.Application报错的解决方法
- unity火焰粒子效果
- 通过BL102实现Modbus PLC接入Thingsboard
热门文章
- 近一个月总结(鸡汤多于技术)
- imchat视频聊天室 linux,基于Nuxt+Vant聊天模板|nuxt.js仿微信界面|红包|朋友圈
- 方面级情感分析论文泛读02:Syntax-Aware Aspect-Level Sentiment Classification with Proximity-Weighted Convolution
- Navicat导出整个数据库
- GitHub——修改DNS提高git clone速度
- Java多线程复习整理(二)
- 你认为,做期货是基本面更有效还是技术面更有效?
- 谈谈浏览器中富文本编辑器的技术演进
- D3.js绘制竖向组织架构图
- 孙悟空这个农村人(搞笑)