电脑桌面怎么设置html背景图,css中如何设置背景图片?
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片。
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中如何设置背景图片?相关推荐
- html如何设置背景半透明,css中如何设置背景半透明
css中设置背景半透明效果可以使用opacity属性,该属性用来设置元素的不透明级别,如[opacity:0.5],表示将元素设置为半透明状态. 本文操作环境:windows10系统.css 3.th ...
- css如何设置文本垂直居中显示,css中怎么设置文本居中?css文本垂直居中的设置方法...
在网页设计的过程中,有时候可能为了布局美观可能需要让文本居中,那么,怎么设置文本居中呢?本篇文章将给大家介绍关于css设置文本垂直居中的方法. 首先我们要知道通过css实现元素的水平居中较为简单:对文 ...
- table row设置cell的html,css中display设置为table、table-row、table-cell后的作用及其注意点...
http://www.cnblogs.com/lee90/p/6602478.html html: 1.当设置display:table;时,table的padding设置会失效.[可自己测试一下] ...
- css 边框设置成不透明,css中如何设置半透明边框?
可以参考以下我的这个代码: XXX:{ border: 5px solid rgba(XXX, XXX, XXX, 0.5) } 其中第一个XXX是你选择的需要半透明的元素 接下来的XXX是你想要半透 ...
- CSS中如何实现背景图片透明并且固定和文字不透明效果
设置背景图片的透明度,并且该背景图片不随鼠标滚动而移动,我们可以使用滤镜filter中的透明度设置opacity,并使用伪类before和定位 至于opacity的作用:转化图像的透明程度.值定义转换 ...
- CSS中如何制作背景图片半透明但内容不透明的效果
CSS中如何制作背景半透明但内容不透明的效果 一.利用伪元素:before添加一个半透明的背景,并利用position定位属性,设置z-index值为-1,显示在下层. css: <style& ...
- 怎么修改html模板里的背景,如何替换背景图模板中的背景
原标题:如何替换背景图模板中的背景 图文排版 H5秀 小伙伴 小米,你们最近做的"假装一个标题"那个模板里的图咋替换啊,想换成自己的图,怎么点都换不了呢? 其实,这个模板中的图是作 ...
- css中如何设置hr的样式?css hr标签多种样式(图文)
在对html网页进行美化的时候,肯定少不了要用的hr标签进行修饰页面,但默认的hr标签样式对页面的修饰起不到什么好的作用,有经验的前端工作者就会通过使用css样式来对hr标签进行一些美化的操作.那么如 ...
- HTML和CSS中如何设置中文字体
你是不是也遇到过这个问题:在HTML或CSS中怎么设置字体为宋体或楷体或黑体等等中文字体呢?下面就来解决这个问题. 用font-family:字体英文名 即可. fon标记是HTML里最常用的文字格式 ...
最新文章
- Java项目:贪吃蛇游戏(java+swing)
- 反向代理服务器的工作原理
- 替代离线RL?Transformer进军决策领域,「序列建模」成关键
- python处理excel-python对Excel的读取
- struts 文件下载
- android 等待回调再返回结果_震惊!!只剩你还不懂Java回调机制了!
- Neo4j:带密码的TF / IDF(和变体)
- php中,多维数组是什么意思,在PHP中回显多维数组
- python将缺失值用0代替_平滑而不使用零填充缺失值
- SessionID的传送
- 苹果手机搭建php服务器,给自己搭建iPhone Installer软件源
- poi设置excel表格边框,字体等
- 利用Python将PDF转化为图片的方法
- 10个经典的公开数据集+免费下载链接
- 微信特殊字符包括颜文字、表情的后台存储及前端展示方法
- MySQL ERROR 1064 (42000)
- 第十六章 二次根式 教案
- Android实战(MediaPlayer填坑)
- Centos7制作Openstack下win7 镜像
- mysql判断表是否为空_quot;他为什么对我这么好?”:一张测量表判断男生是否喜欢你!...