前端学习 -- 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 中,是为 ...
随机推荐
- CentOS搭建NAT和DHCP服务，实现共享上网
什么是NAT? NAT(Network address translation)即网络地址转换,作为一种过渡解决手段,可以用来减少对全球合法IP地址的需求.简单的说,NAT就是在内部专用网络中使用内部 ...
- Error【0006】：could not create or update nagios.configtest
1. 错误背景 在本系列博客<Nagios监控系统部署(源码).md>中(笔记内链:Nagios监控系统部署(源码).md,博客园地址:https://www.cnblogs.com/li ...
- python-深浅copy-18
# 赋值运算l1 = [1,2,3]l2 = l1l1.append('a')print(l1,l2) # [1, 2, 3, 'a'] [1, 2, 3, 'a'] #copyl1 = [1,2,3 ...
- 01springboot快速入门
SpringBoot快速入门 springboot的宗旨是习惯大于配置,所以spring里面大量使用了默认的配置来简化spring的配置.spring Boot的主要优点: 为所有Spring开发者更 ...
- PHP加密与编码技术
md5加密: string md5( string $str [,bool $raw output=false]) md5加密方法用的挺多,有两个参数,第一个参数是要加密的字符串,第二个参数默认为f ...
- js十大排序算法：冒泡排序
排序算法说明: (1)对于评述算法优劣术语的说明 稳定:如果a原本在b前面,而a=b,排序之后a仍然在b的前面:不稳定:如果a原本在b的前面,而a=b,排序之后a可能会出现在b的后面: 内排序:所有排 ...
- 原生js作用域（红宝书）
function fn(){ ; alert(a); // 2; } alert(a);//未被定义: alert(b);//全局变量:b=2: ; function fn1(){ ; functio ...
- [转帖]关于hostnamectl 命令
作者:Linux运维 来源:CSDN 原文:https://blog.csdn.net/linuxnews/article/details/51112022 版权声明:本文为博主原创文章,转载请附上博 ...
- Jquery 组 tbale表格隔行变色
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
- inf
下确界 inf,表示下确界,英文名infimum. 对于函数y=f(x),在使f(x)大于等于M成立的所有常数M中,我们把M的最大值max(M)(即函数y=f(x)的最小值)叫做函数y=f(x)的下确 ...