文档章节

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

天祁
 天祁
发布于 2014/06/05 11:45
字数 635
阅读 198
收藏 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会自适应匹配,如果......

爱喝水的小熊
2018/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
6
css sprites精灵图、css图片整合、css贴图定位案例教程

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

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

没有更多内容

加载失败,请刷新页面

加载更多

【PG内核】事务ID冷冻简述

数据库代码中事务ID的类型TransactionId定义为:typedef uint32 TransactionId。因此事务ID最大值为2^32-1=4294967295。 事务ID是需要循环使用的,为了做到这一点,数据库在做vacuum时将很老...

movead
21分钟前
13
0
深入学习SpringMVC以及学习总结

一、优点: 1.SpringMVC简化web程序开发; 2.SpringMVC效率很好(单例模式); 3.SpringMVC提供了大量扩展点,方便程序员自定义功能; 如果想学习Java工程化、高性能及分布式、深入浅出。微服...

编程SHA
21分钟前
1
0
关于开源分布式事务中间件Fescar,我们总结了开发者关心的13个问题

开源分布式事务中间件 Fescar 自1月10日上线v0.1版本以来,受到了开发者们的极大关注(watch249,star3005,fork649,社区讨论的issue58,数据统计于1月17日14:00),可见,天下苦分布式事务...

阿里云官方博客
22分钟前
1
0
斯皮格尔:我们敢于采纳非常疯狂的创意

“阅后即焚”照片分享应用 Snapchat 母公司 Snap 的 CEO 埃文-斯皮格尔(Evan Spiegel)近日接受了英国《金融时报》记者的采访,谈到了该公司的未来发展,与社交网络 Facebook 的竞争,限制自己...

linuxCool
23分钟前
1
0
javaweb文件上传以及文件上传成功后但是目录中没有显示

经过看别人写的代码然后自己实际操作一遍,基本都是搬运也是为了练习。1:创建fileUpLoad.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UT......

小橙子的曼曼
25分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部