前端学习 -- Html&Css -- 背景
background 在一个声明中设置所有的背景属性。
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 设置元素的背景图像。
background-position 设置背景图像的开始位置。
background-repeat 设置是否及如何重复背景图像。
使用background-image来设置背景图片
- 语法：background-image:url(相对路径);
- 如果背景图片大于元素，默认会显示图片的左上角
- 如果背景图片和元素一样大，则会将背景图片全部显示
- 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色，一般情况下设置背景图片时都会同时指定一个背景颜色。
background-repeat用于设置背景图片的重复方式。
可选值：
- repeat，默认值，背景图片会双方向重复（平铺），
- no-repeat ，背景图片不会重复，有多大就显示多大，
- repeat-x， 背景图片沿水平方向重复，
- repeat-y，背景图片沿垂直方向重复。
背景图片默认是贴着元素的左上角显示
通过background-position可以调整背景图片在元素中的位置
可选值：
该属性可以使用 top right left bottom center中的两个值
来指定一个背景图片的位置
top left 左上
bottom right 右下
如果只给出一个值，则第二个值默认是center
也可以直接指定两个偏移量，
第一个值是水平偏移量
- 如果指定的是一个正值，则图片会向右移动指定的像素
- 如果指定的是一个负值，则图片会向左移动指定的像素
第二个是垂直偏移量
- 如果指定的是一个正值，则图片会向下移动指定的像素
- 如果指定的是一个负值，则图片会向上移动指定的像素
background-attachment用来设置背景图片是否随页面一起滚动
可选值：
- scroll，默认值，背景图片随着窗口滚动
- fixed，背景图片会固定在某一位置，不随页面滚动
不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素。
实现方式1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> body{
height: 5000px;
background: #bfa url(img/HBuilder.png) center center no-repeat fixed;
} </style>
</head>
<body>
</body>
</html>
实现方式二：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
height: 5000px;
background-color: #bfa;
background-image: url(img/HBuilder.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head> <body>
</body> </html>
效果：
前端学习 -- Html&Css -- 背景的更多相关文章
- 前端学习：CSS的学习总结(图解）
前端学习:CSS的学习总结(图解) CSS代码笔记 CSS简介 css的引入方式和书写规范 CSS选择器 CSS属性 CSS盒子模型 CSS的定位
- 2016.01.22 前端学习 HTML/CSS
学习HTML/CSS http://edu.51cto.com/course/course_id-3116.html 明日实践
- Day4前端学习之路——背景边框列表链接和更复杂的选择器
课程目标 掌握 CSS 稍微复杂的一些选择器,还有背景,边框等一些 CSS 样式属性 主要内容: 背景属性 边框 列表 链接 其他选择器 选择器概览:https://www.w3school.com. ...
- 前端学习 -- Html&Css -- ie6 png 背景问题
在IE6中对图片格式png24支持度不高,如果使用的图片格式是png24,则会导致透明效果无法正常显示 解决方法: 1.可以使用png8来代替png24,即可解决问题,但是使用png8代替png24以 ...
- 前端学习笔记--CSS样式--背景和超链接
1.背景 2.超链接: 举例:
- 前端学习之CSS
CSS介绍 CSS(Cascading Style Sheet, 层叠样式表)定义如何显示HTML元素, 给HTML设置样式, 让它更加美观. 当浏览器读到一个样式表, 它就会按照这个样式表来对文档进 ...
- 前端学习 之 CSS（三）
九:浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思. 属性值: none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 例: htm ...
- 前端学习 之 CSS（二）
五:继承性和层叠性 css有两大特性,即继承性和层叠性. 1. 继承性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设 ...
- 前端学习 之 CSS（一）
一:什么是 CSS? ·CSS 指层叠样式表 (Cascading Style Sheets) ·样式定义如何显示 HTML 元素 ·样式通常存储在样式表中 ·把样式添加到 HTML 4.0 中,是为 ...
随机推荐
- 一个很好用的在线编辑、展示、分享、交流JavaScript 代码的平台
在发表博客时,有一些代码只能粘贴进去,而不能看到代码运行的效果,需要读者把代码粘贴进自己的编辑器,然后再运行看效果,这是一件很耗时的事情 在平时百度的时候,我发现一些网站可以在线预览功能,而且可以在线 ...
- TRIO-basic变量的状态位
TRIO运动控制器在应用中,我们一般会用一个VR寄存器的状态位来控制一些报警信号,这样有利于代码的优化,同时和触摸屏设置报警信息大大的方便和节约时间. 首先测试了一下一个寄存器可以设置多少个状态位. ...
- kvm虚拟化关闭虚拟网卡virbr0的方法
我们知道:kvm虚拟化环境安装好后,ifconfig会发现多了一个虚拟网卡virbr0这是由于安装和启用了libvirt服务后生成的,libvirt在服务器(host)上生成一个 virtual ne ...
- HTML5-indexedDB使用常见错误总结
indexedDB使用过程中常常会出现以下错误: Failed to execute ‘createObjectStore’ on ‘IDBDatabase’: The database is not ...
- PAT甲题题解-1130. Infix Expression (25)-中序遍历
博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6789828.html特别不喜欢那些随便转载别人的原创文章又不给 ...
- ACM-ICPC 2018 徐州赛区网络预赛 G. Trace-树状数组-区间修改，单点查询
赛后和队友讨论了一波,感谢无敌的队友给我细心的讲题 先埋坑 #include<iostream> #include<string.h> #include<algorith ...
- 转发：C#操作SQL Server数据库
转发自:http://www.cnblogs.com/rainman/archive/2012/03/13/2393975.html 1.概述 2.连接字符串的写法 3.SqlConnection对象 ...
- <构建之法>13——17章的读后感
第13章:软件测试 问题:对于这么多种的测试方法,怎么才能最有效的选取? 第14章:质量保证 问题:很多工程师都把大多数时间花在软件质量上.一成不变是无法创新的.如何在保证质量的情况下,又得到创新呢? ...
- MySQLi面向对象实践--multi_query
使用multi_query可以实现执行多条SQL语句,每一条SQL语句通过分号分隔. 需要注意的是: 多条用分号分隔的SQL语句中,只要有一条SQL语句执行失败,那么这一条SQL语句以及之后的SQL语 ...
- MySQL的Blob类型的手工编辑（manually edit）
https://dba.stackexchange.com/questions/17593/in-mysql-how-to-manually-edit-values-of-a-blob-column- ...