文档章节

网页背景图片设置的点滴积累

天祁
 天祁
发布于 2014/06/05 11:45
字数 635
阅读 189
收藏 11

        做网站前端这么多年了,不管是divcss技术,还是ps网页设计都积累了不少东西,很多时候都感觉网站前端真是个技术与艺术结合的产物,不管是技术还是艺术,都得懂,而且是很懂。

        今天一个客户问起网页背景图片怎么样设置才能够是网页看起来漂亮,让用户感觉起来舒服,提高粘剔性,又不会影响到网页的加载速度。

        那我就顺便总结了一下,其实网页背景设置无外乎几个方面,关于图片和颜色:

            第一:图片要尽量的小,充分利用页面平铺技术,进行平铺,网页背景图片基本都是可以平铺的。

           第二:图片尽量做到不那么耀眼,因为网页背景毕竟只是个装饰作用的,不能够喧宾夺主,掩盖了网页主题内容。

        那么具体怎么样把图片放在网页上呢?这里就需要用到css技术了,有些人看到css看到代码就蒙了,其实很简单的,给大家做个示范吧:

先看下没有添加网页背景的网页代码:

<!DOCTYPE html>
<html>
<head>
<title>测试网页</title>
</head>
<body>
这个是我们的测试网页
</body>
</html>

然后我们添加一个网页背景颜色:

<!DOCTYPE html>
<html>
<head>
<title>测试网页</title>
<style>
body{ background:#333333;}
</style>
</head>
<body>



在浏览器打开修改后的网页是不是有一个灰色的背景了。

现在我们在这个基础上添加一个背景图片:

<!DOCTYPE html>
<html>
<head>
<title>测试网页</title>
<style>
body{ background:#333333 url(http://background.wandongli.com/upload/pic/1399113292.png);}
</style>
</head>
<body>
这个是我们的测试网页
</body>
</html>


在浏览器打开我们修改后的网页是不是有一个特别好看的网页了。

其实网页背景设置的关键是找到一个好看的背景图片,这个向大家推荐一个专门做网页背景的网站 网页背景(http://background.wandongli.com),里边还有很多精美的网页背景,大家可以去试试,我感觉还不错哦。


© 著作权归作者所有

共有 人打赏支持
天祁
粉丝 4
博文 7
码字总数 2664
作品 0
郑州
程序员
加载中

评论(1)

许雷神
许雷神
谢谢分享
Html5 CSS设置背景图片

昔闻H5,今学H5。 本文聊聊网页设置背景图片,用URL设置图片路径很简单,关键是图片位置匹配。 当然,图片资源太不好,调着又太麻烦,我们换图,送你中get图片资源的方式。 请看【三、设置太...

AmosWang
2016/07/13
234
0
img与background-image之间的区别

1.img <img src="图片来源" alt="图片无法显示时显示图片说明性文字" style="设置样式属性" /> img标签虽然不是块状元素,但是可以设置宽高,占位, img设置width后height会自适应匹配,如果...

爱喝水的小熊
07/17
0
0
论:img和background-image的各种区别

background-image是背景图片,是css的一个样式 <img />是一个块状元素,它是一个图片,是html的一个标签 background-image是只能看的 <img />是一个document对象,它是可以操作的。比如更换i...

_大雁
2013/06/13
0
0
网页背景怎么适应分辨率的改变?

今日小弟在制作一个网页时遇到了如下问题,为网页设置背景时,图片分辨率太小,填不满浏览器,我就做了一个和电脑分辨率适应的网页背景图片,可是如果其他分辨率的电脑访问不就又出问题了么?...

木叶源
2013/02/08
2.7K
7
css sprites精灵图、css图片整合、css贴图定位案例教程

一、 什么是css sprites CSS Sprites通常被称为css精灵图,在国内也被意译为css图片整合和css贴图定位,也有人称他为雪碧图。就是将导航的背景图,按钮的背景图等有规则的合并成一张背景图,...

智能机器人蓝梓轩
07/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Coding and Paper Letter(三十七)

资源整理。 1 Coding: 1.GDAL的node.js版本。 node gdal 2.R语言包echor,下载EPA许可设施的废水排放和空气排放数据。 echor 3.CPPTRAJ是一个旨在处理和分析分子动力学轨迹和从其分析中得出的...

胖胖雕
23分钟前
2
0
plsql developer如何创建新用户(users)

plsql developer如何创建新用户(users) 2017年05月04日 21:51:43 Alan_ZhQ 阅读数:14558 标签: plsql developer 更多 个人分类: plsql developer 版权声明:本文为博主原创文章,转载请...

linjin200
26分钟前
1
0
php安装编译时错误合集

php安装编译时错误合集 出现collect2: ld returned 1 exit status make: *** [sapi/cli/php] Error 1 出现此种错误最大可能是配置时出现了错误 libxml默认安装的路径是/usr/local,我把--wit...

alt_tab_jj
28分钟前
1
0
7.09-js保留小数点后两位

//num 是传过来的值,del是要保留几位 function valueFmt(num, del) { if (num != '') { if (del != 0) { num = parseFloat(num).toFixed(del); } var source = String(num).split("."); so......

静以修身2025
30分钟前
2
0
正则介绍_grep

10月16日任务 9.1 正则介绍_grep上 9.2 grep中 9.3 grep下 grep基本用法 grep [-cinvABC] 'word' filename centos7.x版本的grep实则为grep --color=auto -c 显示匹配到的行数 [root@localhos......

robertt15
38分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部