文档章节

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

天祁
 天祁
发布于 2014/06/05 11:45
字数 635
阅读 178
收藏 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
MYSQL性能优化的那些事儿

一、从配置方面入手 my.ini配置 pool-size可以缓存索引和行数据,值越大,IO读写就越少,如果单纯的做数据库服务,该参数可以设置到电脑物理内存的80%。 二、从字段设置上入手 设置索引:数据...

淡定的米哥
2016/11/18
10
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

kernel version does not match DSO version

错误信息: kernel version 384.11 does not match DSO version 384.130.0 原因是: cuda driver版本太低,不匹配DSO 简单有效的修复方法,升级nvidia driver, 步骤如下: 1. google seach ...

刘小米
今天
0
0
maven坐标和依赖

一、maven坐标详解 <groupId>com.fgt.club</groupId><artifactId>club-common-service-facade</artifactId><version>3.0.0</version><packaging>jar</packaging> maven的坐标元素说......

老韭菜
今天
1
0
springmvc-servlet.xml配置表功能解释

问:<?xml version="1.0" encoding="UTF-8" ?> 答: xml version="1.0"表示是此xml文件的版本是1.0 encoding="UTF-8"表示此文件的编码方式是UTF-8 问:<!DOCTYPE beans PUBLIC "-//SPRING//......

隐士族隐逸
今天
1
0
基于TP5的微信的公众号获取登录用户信息

之前讲过微信的公众号自动登录的菜单配置,这次记录一下在TP5项目中获取自动登录的用户信息并存到数据库的操作 基本的流程为:微信设置自动登录的菜单—>访问的URL指定的函数里获取用户信息—...

月夜中徘徊
今天
0
0
youTrack

package jetbrains.teamsys.license.runtime; 计算lis package jetbrains.ring.license.reader; 验证lis 安装后先不要生成lis,要把相关文件进行替换 ring-license-checker-1.0.41.jar char......

max佩恩
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部