一、背景图片

背景图片默认显示的是图片的原始尺寸，如果背景图片大于元素尺寸，则只能显示图片的一部分(左上角)。

1.background-image: 设置元素的背景图片。

url("图片路径")

注意：

当图片比较小时，默认会以平铺的方式铺满整个背景区域。

平铺：

图片会在水平和垂直两个方向上重复自己，直至背景区域填充完整。

2.background-repeat: 设置背景图片是否重复显示。

当背景图片的尺寸小于元素尺寸时，背景图片会重复显示直到铺满整个元素。

值：

repeat：默认值，平铺/重复出现。

no-repeat：不重复。

repeat-x：水平平铺。

repeat-y：垂直平铺。

space：保持图片的大小平铺满整个背景区域，剩余空间作为图片之间的间隙平分。

round：保持图片的完整性，根据背景区域图片相对应拉伸填充。

3.background-attachment: 设置背景图片是否固定。

背景图片是否随着页面的其他部分滚动。

值：

scroll：默认值，背景图片会随着滚动条而滚动。

fixed：背景图片不会随着滚动而滚动。

4.background-position: 设置背景图片横向和纵向的位置，默认为0 0。

设置为50%可以实现居中。

5.background-size: 设置背景图片的尺寸，分别表示宽和高。

图片的大小仅设置一个方向，另一个方向根据图片大小自动缩放。

值：

contain：根据容器的最小值设置图片，将图片进行比例缩放，图片会始终包含在容器之内，容器范围可能不被完全占用。

cover：根据容器的最大值设置图片的大小，将图片比例缩放至完全覆盖整个容器，图片可能会超出容器。

-数值：第一个值为X轴(宽度)，第二个值为Y轴(高度)。

单位：

px：像素，固定的大小。

%：百分比，以容器的大小作为标准进行计算。

-值为一个：该值将作用于X轴(宽度)位置，高度为auto，此时的背景图片高度以X轴(宽度)作为参考进行比例缩放。

二、精灵图片

CSS SCRIPT：css图片精灵或雪碧图。

什么是精灵图片：

精灵图片就是将多张图片放置到一张大的图片上面。

精灵图片主要是当做背景图片插入。

为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，减轻服务器的压力。

三、元素内容溢出

1.元素内容溢出：当元素固定宽高，不被内容撑开时，如果内容的宽高超出元素本身的宽高，超出元素边界的内容任然会显示。

2.overflow: 设置元素溢出部分内容的显示方式，默认为显示。

值：

visible：默认值：内容不会被隐藏，溢出的内容出现在元素大小之外。

hidden：溢出的部分不显示。

scroll：溢出的内容可以滚动查看。

auto：隐藏溢出内容，出现滚动条。

3.overflow-x: 设置水平方向溢出内容的显示方式。

overflow-x: scroll;

4.overflow-y: 设置垂直方向溢出内容的显示方式。

overflow-y: scroll;

5.文本不换行：

white-space: nowrap;（强行在同一行显示）

text-overflow: ellipsis;（文本溢出以省略号...为后缀。）

6.resize: 允许用户调整元素的大小。

值：

none：默认值，不能调整元素的大小。

horizontal：允许用户调整元素的宽度。

vertical：允许用户调整元素的高度。

both：允许用户调整元素的宽高。

四、长度单位

px，表示像素，1px相当于屏幕上最小的一个显示单位。

em，表示当前元素父元素的字体大小。

rem，表示根元素的字体大小。

1vw表示浏览器窗口宽度的1%。

1vh表示浏览器窗口高度的1%。

cm，厘米。

mm，毫米。

pt，磅。

html+css学习第六天（背景图片、精灵图片、元素内容溢出、长度单位）相关推荐

css --- [学习笔记]背景图片小结 css三大特性
源代码参考 1. 行高(line-height) 目标理解 - 能说出行高和高度三种关系 - 能简单理解为什么行高等于单行文字会垂直居应用使用行高实现单行文字垂直居中能会测量行高 2. CS ...
css3 背景等比例,纯 CSS，不用背景，实现图片等比例展示
最简单的等比例:div img { max-width:100%; max-height:100%; } 如上显示效果是:图片等比例缩放,不变形:图片所有区域都会显示. 但是,如上代码有可能会造成横向 ...
html中图片等比例展示,纯 CSS，不用背景，实现图片等比例展示
最简单的等比例:div img { max-width:100%; max-height:100%; } 如上显示效果是:图片等比例缩放,不变形:图片所有区域都会显示. 但是,如上代码有可能会造成横向 ...
css动画使用背景图片卡顿_CSS入门学习笔记（二）：布局与定位
在CSS学习使用的过程中有一个方法可以检验出自己的错误,那就是border大法! 图片素材网站:wall haven: 透明属性:background-color:rgba(0,0,0,0.5) ba ...
css图片精灵定位_DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位教程案例
div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css sprites实例篇 css sprites拼合背景图片素材实现布局效果截图一.什么 ...
CSS Sprites(CSS图片精灵、雪碧图)看这里就够了
CSS Sprites是什么 CSS Sprites是一种网页图片应用处理方式. 又被解释为: CSS精灵 CSS图像拼合 CSS贴图定位 CSS图片精灵 CSS雪碧图图片合成技术 CSS Spri ...
CSS基本知识之复合选择器、元素显示模式、背景图片位置，精灵图
CSS基本知识之复合选择器.元素显示模式.背景图片位置,精灵图一.复合选择器在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进 ...
css怎么分开背景图片,css切背景图片（background-position）
给元素添加背景图片的方式有很多,个人总结的有: 用img插入图片: css3的方式手动绘图: 单独用background-image单独插入图片: 其中用background-image有两种方法,一 ...
CSS设置html网页背景图片 CSS设置网页背景颜色
http://www.divcss5.com/jiqiao/j768.shtml CSS设置网页背景图片 CSS设置网页背景颜色技术教程篇本篇DIVCSS5以布局思想介绍使用CSS设置实现网页背景技 ...

html+css学习第六天（背景图片、精灵图片、元素内容溢出、长度单位）