html中图片太大了,css背景图片太大的坏处与解决方法

在制作网页的过程中，有时候我们为了页面的个性、漂亮，会给通过CSS给网页设置一个很大的背景图片，可是背景图片太大的话不但会给我们的访客带来一些烦恼，还会对搜索引擎不友好，导致排名的降低，实在是得不偿失。

为什么背景图片太大会给我们的访客带来烦恼？

当背景图片太，而浏览网页的访客屏幕太小的时候，访客的网页下边会出现滚动条，给访客浏览你的网页带来一些烦恼，照成一些不便。同时，背景图片太大，就意味着图片的体积就会增大，如果访客的网络速度比较慢的话，打开你的网页会需要较长的等待时间。

为什么背景图片太大是对搜索引擎不友好？

现在的搜索引擎越来越考虑用户体验这个问题，和上面的原因一样，假如一个访客通过搜索引擎进入到你的网页，由于图片太大，过了很久都没有把你的网页打开或者进入你的网页后浏览起来很不方便，那么他会毫不犹豫的关闭你的网页，点击下一条搜索结果。

那么我们该如何解决这个问题呢？个人觉得大概分为下面的2中情况：

一、CSS背景图片是规则的图形或纯色：

如果背景图片是规则的图形的话，可以截取图片的一小部分，然后通过CSS设置图片的平铺，就可以将整个网页的背景图片表现出来了。而如果网页的背景图片是纯色的话，建议直接使用颜色就好了，这样不但实现了背景颜色，还可以加快网页的打开速度。

二、背景图片是一张完整的图片：

如果背景图片是一张照片的话，而这个图片又太大了，比如，张照片的宽有2000px，那么建议先在Photoshop中进行图片锁定比例的缩小，然后再进行切片，最后再一块一块的放如网页中，这样既保证了图片的完整性，有可以让访客感觉打开网页的速度变还是挺快的。

《css背景图片太大的坏处与解决方法》地址：www.cunguer.com/article/301.html，本文来自村姑网，您身边的IT专家

www.cunguer.com，转载请注明出处，您的支持是我们创作的源泉~！

html中图片太大了,css背景图片太大的坏处与解决方法相关推荐

html背景图片压缩显示,css背景图片在浏览器缩小时为什么下面出现了白色的
我来补充一下原因. 首先,我测试了一下,的确存在这个问题. Scale the image, while preserving its intrinsic aspect ratio (if any), ...
缩小窗口时CSS背景图出现右侧空白BUG的解决方法
页面容器(#wrap)与页面头部(#header )为100%宽度.而内容的容器(#page)为固定宽度960px.浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异.如下图所示窗口宽度大于内容层宽 ...
html css背景图片精灵技术,HTML入门学习笔记--CSS背景和精灵图(5)
33-背景色彩 1.如何设置标签的背景色彩? 在CSS中有1个background-color:属性, 就是专门用来设置标签的背景色彩的取值: 具体单词 rgb rgba 106进制快捷键: bc ...
html图片滚动红点_HTML中更换或添加网站背景图片的代码怎么写？（示例）
本篇文章主要介绍了HTML代码中如何更换或添加网站背景图片?对于小白来说,最简单的方法就是,如果是更换背景图片的话. 我们可以在网页上点击鼠标右键查看网站源代码,然后找到css里面的背景图这一段代码, ...
利用wget 抓取网站网页包括css背景图片
利用wget 抓取网站网页包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持c ...
css背景图片、圆角、盒子阴影、浮动
一.css背景图片 1.概述背景是css中一个重要的的部分,也是需要知道的css的基础知识之一.这里主要介绍有关背景图片的5种常见属性,分别是: (1). background-color: rgb ...
css背景图片添加url_CSS背景图片–如何向您的Div添加图片URL
css背景图片添加url Say you want to put an image or two on a webpage. One way is to use the background-imag ...
[转]解决IE下CSS背景图片闪烁的Bug
[转]解决IE下CSS背景图片闪烁的Bug <P> 很多时候我们要给一些按钮或是img设置背景,而为了达到数据与表现样式分离的效果,通常背景样式都是在CSS里设定的,但是这个 ...
html图片撑开盒子,css背景图撑开盒子高度
本文原地址需求: 给定1980px*1080px背景图,在网页显示时,图片宽度等于浏览器宽度,高度根据原图比例显示对应高度,假设图片最小宽度设置为1024px,则最小高度为1024/(1980*10 ...

html中图片太大了,css背景图片太大的坏处与解决方法

html中图片太大了,css背景图片太大的坏处与解决方法相关推荐

最新文章

热门文章