一、网址:http://www.csszengarden.com/?cssfile=213/213.css

二、效果

三、CSS

body
{
background-color:#F0ECD6;
background-image:Url(Images/water.png);
background-position:top;
background-repeat:repeat-x;
}

四、说明

网页背景色与大海融为一体,这个是非常唯美的艺术效果。而更大的亮点则是,背景图片的左右两边各有一条没有特别虚化的亮线,这个背景图片如果只是随便地设为背景,那,背景会有两条比较明显线痕,这会是很重的一个败笔。但,样式表中,设置了background-position:top;背景图片在水平居中,垂直靠上的位置开始水平平辅,这两条线痕,则成了内容的左右边框,浑然天成,让人不得不感叹作者的匠心独运。

HTML+CSS实例——漂亮的背景(一)的更多相关文章

  1. HTML+CSS实例——漂亮的查询部件(一)

    一.参考网址:www.kuhnsjewelers.com 二.效果: 三.HTML <div id="search-box"> <asp:TextBox ID=& ...

  2. ASP.NET实例——漂亮的自适应宽度的导航条(仿Discuz!)

    PHP比较成熟的开放的源代码比较多,比方说PrestaShop,比方说Discuz!...... 虽然语言不同,但基本原理是一样的,有时间的话读一读,对学习ASP.NET应该是非常有好处的(唉,什么时 ...

  3. CSS实例

    CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片(这个图片不会随页面 ...

  4. CSS:CSS 实例

    ylbtech-CSS:CSS 实例 1.返回顶部 1. CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的背景图片 如何在水平方向重复背景图像 ...

  5. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  6. CSS之全屏背景图

    吐槽啦:Yeah  明天就是国庆了o(* ̄▽ ̄*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...

  7. LESS CSS 实例

    值得参考的 10 个 LESS CSS 实例   2 收藏(185) LESS, Sass 和其他 CSS 预处理器是一种超棒的方法用来扩展 CSS 功能,使之更适合程序员.你可以使用变量.函数.混合 ...

  8. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

  9. .NET生成漂亮桌面背景

    .NET生成漂亮桌面背景 一天,我朋友指着某某付费软件对我说,这个东西不错,每天生成一张桌面背景,还能学英语(放置名人名言和翻译)!我说,这东西搞不好我也能做,然后朋友说,"如果你搞出来了, ...

随机推荐

  1. ubuntu java jdk安装及环境变量设置

    1.下载jdk1.7.0_79 (32位操作系统)jdk-7u79-linux-i586.tar.gz (64位操作系统)jdk-7u79-linux-x64.tar.gz http://www.or ...

  2. LINUX下成功搭建SVN

    步骤如下: 1: yum install -y subversion 2:svnserve –version 3: [root@singledb ~]# mkdir /u02/svn [root@si ...

  3. 前端的一些常用DOM和事件归纳

    1.document.getElementById(id); document.getElementByTagName(tagName);       document.getElementsByNa ...

  4. POJ 2828 Buy Tickets (线段树 or 树状数组+二分)

    题目链接:http://poj.org/problem?id=2828 题意就是给你n个人,然后每个人按顺序插队,问你最终的顺序是怎么样的. 反过来做就很容易了,从最后一个人开始推,最后一个人位置很容 ...

  5. 用Rufus来制作Windows10的U盘安装盘

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:用Rufus来制作Windows10的U盘安装盘.

  6. 栈的应用2——超级计算器(中缀与后缀表达式)C语言

    输入中缀表达式输出结果(结果可以是小数,但输入必须是整数)  #include<stdio.h> #include<stdlib.h> //需要两个栈,一个储存结果,一个储存运 ...

  7. 【android-cocos2d-X 环境配置】在Mac下搭建Cocos2d-X-android开发环境!

    转自:http://blog.csdn.net/dingkun520wy/article/details/17097593 (1)下载 首先要下载好要用到的东西: 1.android-SDK 地址是  ...

  8. Unity的使用

    1.Ioc功能使用: 1.介绍对象的生命周期 顾名思义 在容器中存在的实例,是可以定义其生命周期的. Unity提供了 几种自带的 生命周期 管理类(常用的已标红) ContainerControll ...

  9. iOS开发笔记系列-基础6(预处理程序)

    预处理程序提供了一些工具,使用这些工具更易于开发.阅读.修改程序,也易于将程序移植到不同的系统中.又称为宏. #define #define语句的基本用途之一就是给富豪名称指定程序常量.比如: #de ...

  10. Codeforces Round #329 (Div. 2) A. 2Char 暴力

    A. 2Char Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/593/problem/A De ...