网页背景图片设置的点滴积累
博客专区 > 天祁 的博客 > 博客详情
网页背景图片设置的点滴积累
天祁 发表于4年前
网页背景图片设置的点滴积累
  • 发表于 4年前
  • 阅读 172
  • 收藏 11
  • 点赞 0
  • 评论 1

移动开发云端新模式探索实践 >>>   

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

        做网站前端这么多年了,不管是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
评论 (1)
许雷神
谢谢分享
×
天祁
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: