HTML+CSS实例——漂亮的背景(一)
一、网址: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实例——漂亮的背景(一)的更多相关文章
- HTML+CSS实例——漂亮的查询部件(一)
一.参考网址:www.kuhnsjewelers.com 二.效果: 三.HTML <div id="search-box"> <asp:TextBox ID=& ...
- ASP.NET实例——漂亮的自适应宽度的导航条(仿Discuz!)
PHP比较成熟的开放的源代码比较多,比方说PrestaShop,比方说Discuz!...... 虽然语言不同,但基本原理是一样的,有时间的话读一读,对学习ASP.NET应该是非常有好处的(唉,什么时 ...
- CSS实例
CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片(这个图片不会随页面 ...
- CSS:CSS 实例
ylbtech-CSS:CSS 实例 1.返回顶部 1. CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的背景图片 如何在水平方向重复背景图像 ...
- css制作漂亮彩带导航条菜单
点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...
- CSS之全屏背景图
吐槽啦:Yeah 明天就是国庆了o(* ̄▽ ̄*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...
- LESS CSS 实例
值得参考的 10 个 LESS CSS 实例 2 收藏(185) LESS, Sass 和其他 CSS 预处理器是一种超棒的方法用来扩展 CSS 功能,使之更适合程序员.你可以使用变量.函数.混合 ...
- css网页中设置背景图片的方法详解
在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...
- .NET生成漂亮桌面背景
.NET生成漂亮桌面背景 一天,我朋友指着某某付费软件对我说,这个东西不错,每天生成一张桌面背景,还能学英语(放置名人名言和翻译)!我说,这东西搞不好我也能做,然后朋友说,"如果你搞出来了, ...
随机推荐
- SQL Server 中的三种分页方式
USE tempdb GO SET NOCOUNT ON --创建表结构 IF OBJECT_ID(N'ClassB', N'U') IS NOT NULL DROP TABLE ClassB GO ...
- Chapter 2 Build Caffe
Caffe for windows 的build药按照一定的顺序进行. ============================================================ 先以b ...
- leetcode@ [316] Remove Duplicate Letters (Stack & Greedy)
https://leetcode.com/problems/remove-duplicate-letters/ Given a string which contains only lowercase ...
- 查看Linux里某文件的前面/后面几行中的某一行
如,我想看/etc/profile文件的前5行里的第5行. 则, head -5 /etc/profile | tail -1 管道|啊,很简单,就是把左边命令的结果,作为右边的输入. 如, ...
- POJ 2349 Arctic Network (最小生成树)
Arctic Network 题目链接: http://acm.hust.edu.cn/vjudge/contest/124434#problem/F Description The Departme ...
- CodeForces 176B Word Cut (计数DP)
Word Cut Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Submit St ...
- BestCoder Round #71 (div.2) (hdu 5620 菲波那切数列变形)
KK's Steel Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total ...
- POJ 3177 Redundant Paths(强连通分量)
题目链接:http://poj.org/problem?id=3177 题目大意是一个无向图给你n个点m条边,让你求出最少加多少条边 可以让任意两个点相通两条及以上的路线(每条路线点可以重复,但是每条 ...
- [转]省市二级联动(纯js实现)
转至:http://www.jb51.net/article/41556.htm 实现原理: set_city("省名称",市select对象); 判断市select对象是否为空, ...
- [置顶] 很荣幸被选为2013年度 CSDN博客之星评选,如果觉得我的文章可以,请投我一票!
亲爱的小伙伴们,很荣幸我被选为<2013年度CSDN博客之星候选人>,希望大家多多支持,geekguy会继续努力,为大家奉献更好的文章. 投票地址:http://vote.blog.csd ...