场景一：替换插入图

<h1> 标签是权重最高的标签，一般会在内部书写最重要的内容，比如 logo 图片（企业网站）、最大的标题（新闻网）等。另外 <h1> 内部的文字，可以帮助提高 SEO 搜索排名。在设置logo图片时，如果使用插入图，就不能书写搜索关键字。

背景图替换插入图方法

如果想解决 SEO 问题，可以将 HTML 结构中，插入图换成搜索关键字，然后使用 css 添加背景图给 <a> 标签或 <h1> 标签。

那么如何解决文字隐藏不显示的问题呢？

方法一、

①将字号设置为 0。IE8 及以上或高版本浏览器可以隐藏文字，但是 IE7 及以下有兼容问题。

当使用IE7版本以下浏览器运行时，会出现该问题，会显示文字的1px左右出来。所以这种写法并不是最好的。

方法二、

②可以设置给 <a> 标签一个 text-indent 属性，属性值为负的很大的值，文字会走到盒子外部，直接再设置溢出隐藏属性，将溢出文字隐藏。该方法所有浏览器版本都兼容，是最好的方式。

场景二：padding 区域背景图

制作方法

在一个盒子中有背景图部分，而且有文字内容，文字会让开背景图区域进行加载，背景区域应该使用 padding 挤出位置。四个方向的 padding 都可能用于添加背景图。例如 padding-left 区域背景：

场景三：精灵图技术

1.精灵图介绍

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。

2.css精灵介绍

CSS 精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图。

3.css 精灵的技术依据

①将网页中需要用到的小尺寸背景图制作成一张背景透明的 png 图片。

②利用背景定位技术，将精灵图的每个小图片加载到对应的标签上。

如下是css精灵图的在线制作网站：

CSS Sprite Generator, Editor, and Code

css精灵图制作步骤图

css精灵图使用步骤图

css精灵图使用Fireworks量取精灵图的位置

http://www.spritecow.com/ 注：也可以点击使用该网站进行量取图片位置。

制作精灵图的注意事项

精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放。
精灵图的宽度取决于最宽的那个背景图片的标签宽度。
精灵图可以横向摆放也可以纵向摆放，但是每个图片之间必须留够足够的空白，保证背景图片加载到一个标签内部时，不能出现多余内容。
在精灵图的最底端，尽量留一点空白，方便以后添加其他精灵图。

（16）css背景属性常用应用场景相关推荐

【CSS 背景属性 background】
CSS 背景属性 background CSS 背景属性 1. background 属性: 一次性集中定义 8个背景相关属性 2. background-color 属性: 元素的背景颜色 ( ...
用dw中html设置背景,Dreamweaver 教程-CSS背景属性(background)
但凡正规的网站在设计时都会注重网页背景的使用,一个好的网页背景与整体设计是息息相关的.下面我们就来讲讲一些常用的CSS背景属性. 1.背景颜色属性(background-color)body { ba ...
HTML5 - CSS背景属性、与CSS三大特性描述
文章目录 CSS的背景背景颜色背景图片背景平铺背景图片位置设置超大图片为背景小案例获取网页图片中小技巧背景图像固定(背景附着) 复合属性背景色半透明注意 CSS背景总结(表格) CS ...
[css] scroll-snap-align属性的应用场景是什么？
[css] scroll-snap-align属性的应用场景是什么? 滚动一个列表时,控制列表中一个块始终完全在可视区内,如果滚动到一半可以回弹,保持整个块都在可视区. 个人简介我是歌谣,欢迎和大家 ...
前端：CSS/10/伪类选择器，CSS列表属性，CSS边框属性，CSS内边距属性，CSS背景属性
CSS伪类选择器:给超链接加的样式(链接的不同状态加样式) 一个超链接,有四个状态: 正常状态(:link):鼠标没放上去之前的样式: 放上状态(:hover):鼠标放到链接上时的样式: 激活状态(: ...
html中页面背景属性,css背景属性有哪些？
css背景属性有哪些?下面本篇文章给大家带来关于css背景属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css背景属性有哪些?background简写属性,作用是将背景 ...
零基础学习CSS---05.CSS背景属性详解
CSS属性一.背景属性 1.background-color(背景颜色):red: 2.background-image(背景图片):background-image:url(图片地址); 3.ba ...
CSS背景属性、定位
文章目录前言一.css的常用样式-背景属性 1.背景颜色 background-color 2.背景图片 background-image 3.背景重复 background-repeat 4.背 ...
4.CSS 背景属性
文章目录 1.背景颜色 2.背景图片 3.背景平铺属性 3.1应用场景 4.背景定位属性 4.1背景定位属性(值:单词) 4.2背景定位属性(值:数值) 4.3应用场景 5.背景图片关联方式 6.背景 ...

（16）css背景属性常用应用场景