前端学习 -- 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 中,是为 ...
随机推荐
- JAVA核心：内存、比较和Final
1.java是如何管理内存的 java的内存管理就是对象的分配和释放问题.(其中包括两部分) 分配:内存的分配是由程序完成的,程序员需要通过关键字new为每个对象申请内存空间(基本类型除外),所有的对 ...
- Puppet常识梳理
Puppet简单介绍 1)puppet是一种Linux/Unix平台下的集中配置管理系统,使用自有的puppet描述语言,可管理配置文件.用户.cron任务.软件包.系统服务等.puppet把这些系统 ...
- Samba共享目录的多用户权限设置案例
下面根据实际工作中遇到的一个共享目录的多用户权限需求案例来说明下Samba用户权限的设置. 一.需求场景领导:李一(liyi)正式员工(zhengshiyuangong):刘二二(liuerer).于 ...
- Week7阅读笔记
关于银弹: Brooks在他最著名的这篇文章里指出,在软件开发过程里是没有万能的终杀性武器的,只有各种方法综合运用,才是解决之道.而各种声称如何如何神奇的理论或方法,都不是能杀死“软件危机”这头人狼的 ...
- 我的Android之路——底部菜单栏的实现
底部菜单栏的实现 底部菜单栏两种实现方法:ViewPager:可滑动的界面:Fragment:固定的界面. 首先,页面布局,在除去顶部toolbar之后,将主界面分为两部分,一部分为界面显示区,另一部 ...
- 使用Junit进行单元测试
使用Junit进行单元测试 一．目的和要求 JUnit是一款由Erich Gamma(<设计模式>的作者)和Kent Beck(极限编程的提出者)编写的开源的回归测试框架,供Java编码人 ...
- servlet请求转发
来源:http://www.2cto.com/kf/201610/554591.html 请求转发:Servlet(源组件)先对客户请求做一些预处理操作(数据处理),然后把请求转发给其他Web组件(目 ...
- NSLog debug时打印 release时不打印
创建.h文件,添加以下代码 #ifdef DEBUG #define NSLog(...) NSLog(__VA_ARGS__) #else #define NSLog(...) {} #end ...
- js十大排序算法：冒泡排序
排序算法说明: (1)对于评述算法优劣术语的说明 稳定:如果a原本在b前面,而a=b,排序之后a仍然在b的前面:不稳定:如果a原本在b的前面,而a=b,排序之后a可能会出现在b的后面: 内排序:所有排 ...
- 推荐一个php7+ mongodb三方类
373 次阅读 · 读完需要 8 分钟 5 由于项目需要,把项目升级到了php7.但是升级了之后发现mongo扩展不能用了.php7.0以上只支持mongodb扩展了.而mongodb扩展的驱 ...