背景

背景样式和背景图片重复方式

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">.box1 {width: 1024px;height: 724px;margin: 0 auto;/*设置背景样式*/background-color: #bfa;background-image: url(img/1.png);background-repeat: repeat-y;}</style></head><body><div class="box1"></div></body>
</html>

1. 背景样式

/*设置背景样式*/
background-color: #bfa;

2. 背景图片

background-image 来设置背景图片

语法：background-image:url(相对路径);
- 如果背景图片大于元素，默认会显示图片的左上角
- 如果背景和元素一样大，则会将背景图片全部显示
- 如果背景元素小于元素大小，则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片，
- 这样背景样式将会作为背景图片的底色
- 一般情况下设置背景图片时都会同时指定一个颜色

background-image: url(img/1.png);

3. 背景图片的重复方式

background-repeat 用来设置背景图片的重复方式
可选值：
- repeat，默认值，背景图片会双重复(平铺)
- no-repeat,背景图片不会重复，有多大就显示多大
- repeat-x,背景图片沿水平方向重复
- repeat-y，背景图片沿垂直方向重复

background-repeat: repeat-y;

背景图片的定位

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">* {margin: 0;padding: 0;}.box1 {height: 500px;margin: 0 auto;/** 设置一个背景 */background-color: #bfa;/** 设置一个背景图片*/background-image: url(img/4.png);/** 设置一个图片不重复*/background-repeat: no-repeat;/* background-position: -80px -40px; */background-attachment: fixed;}body {background-image: url(img/3.png);background-repeat: no-repeat;background-attachment: fixed;}</style></head><body style="height: 5000px;"><div class="box1"></div></body>
</html>

1. 背景的定位

1. 说明

背景图片默认贴着元素的左上角显示
通过 background-position 可以调整背景图片在元素中的位置

2. 可选值

该属性可以使用 top right left bottom center 中的两个值来指定一个背景图片的位置
- top left 左上
- bottom right 右下
如果只给出一个值，则第二个值默认是 center

也可以直接指定两个偏移量

第一个是水平偏移量
- 如果指定的是一个正值，则图片向右移动指定的像素
- 如果指定的是一个负值，则图片向左移动指定的像素
第二个是垂直偏移量
- 如果指定的是一个正值，这图片向下移动指定的像素
- 如果指定的是一个负值，则图片向上移动指定的像素

background-position: -80px -40px;

2. 背景图片跟随滚动

background-attachment 用来设置背景图片是否随着页面一起滚动
可选值： - scroll,默认值，背景图片随着窗口滚动 - fixed，背景图片会固定在某一位置，不随页面滚动

不随窗口滚动的图片，我们一般都设置给 body，而不设置给其他元素
当背景图片的 background-attachment 设置为 fixed 时，
- 背景图片的定位永远相对于浏览器的窗口

background-attachment: fixed;

背景简写

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">body {background-color: #bfa;background: #bfa url(img/3.png) center center no-repeat fixed;}</style></head><body></body>
</html>

1. 分开写背景的各个样式

/* 设置一个背景颜色 */
/background-color: #bfa;
/*设置一个背景图片 */
background-image: url(img/3.png);
/* 设置背景不重复 */
background-repeat: no-repeat;
/*设置背景图片的位置*/
background-position: center center;
/*设置背景图片不随滚动条滚动 */
background-attachment: fixed;

2. 简写 background

通过该属性可以同时设置所有相关的样式
没有顺序的要求，谁在前谁在后都行
- 也没有数量的要求，不写的样式就使用默认值

background: #bfa url(img/3.png) center center no-repeat fixed;

CSS-background背景详解相关推荐

CSS background属性详解
background是一种 CSS 简写属性,用于一次性集中定义各种背景属性,包括 color, image, origin 与 size, repeat 方式等等. 此属性是一个简写属性,可以在一 ...
[转]CSS hack大全详解
转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...
background家族详解
background家族详解 CSS2中background家族连写形式 background: background-color, background-image, background-repe ...
background属性详解
background属性详解 background属性主要由以下5个属性组成, background-color::规定要使用的背景颜色 background-image:规定要使用的背景图像 bac ...
css background-attachment属性详解
css background-attachment属性详解 background-attachment属性用途 background-attachment属性用于设置背景图片定位的参照方式 backg ...
基于HTTP浏览器缓存机制全面解析看Table表格的css样式代码详解
文章来源: 学习通http://www.bdgxy.com/ 普学网http://www.boxinghulanban.cn/ 智学网http://www.jaxp.net/ 漂亮的table表格样式 ...
CSS margin属性详解
CSS margin属性详解我发现当我想写好一篇博文的时候,希望以后能有人看到,会对别人也有一定的帮助,这时候对于其中的内容就变得深思熟虑起来,让自己查阅尽可能多的资料,这样的方式正好可以弥补我某些 ...
html embed css,HTML+CSS入门 embed详解
本篇教程介绍了HTML+CSS入门 embed详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < (一).基本语法: embed src=url 说明:embed可以用来 ...
HTML使用CSS的方法详解
HTML使用CSS的方法详解在尝试学习 CSS 之前,您应该了解 HTML 的基础知识,或者同时学习 HTML 和 CSS. html是超文本编辑语言,是用来定义页面结构的,html有很多图文或者视 ...
CSS属性vertical-align详解（CSS之五）
CSS属性vertical-align详解作用对象 vertical-align的意思是在垂直方向进行对齐.它主要对以下属性的元素有效 inline元素.inline-block元素和普通的文本. ...

CSS-background背景详解

文章目录

背景

背景样式和背景图片重复方式

1. 背景样式

2. 背景图片

3. 背景图片的重复方式

背景图片的定位

1. 背景的定位

1. 说明

2. 可选值

2. 背景图片跟随滚动

背景简写

1. 分开写背景的各个样式

2. 简写 background

CSS-background背景详解相关推荐

最新文章

热门文章