CSS教程之背景图像的使用.docVIP

CSS之背景图像的使用 设置背景图片 现在网站背景色，渐变特别流行，给人的感觉也很好。 步骤 制作一张渐变图片，很窄，但很长【我拿photoshop做了一个1000*2的渐变条】。 设置背景图片 Background-position:教程末尾有详细介绍 简写： 以上两个步骤初步形成了背景图片，但是存在一个问题，假设我们的页面2000px，我的背景图片只有1000px长，那么用户拉到后面岂不是没有背景图像了。嗯，这个问题如何解决呢？ 哈哈，设置个背景色：#30E6F 这个颜色取渐变的最深的地方。 这样当背景图达不到的地方显示的就是背景色，背景色取色也和渐变图像很切合。完美哈。 图片代替文本 有的时候网页上显示某些问题需要使用艺术字体，这时候就可以使用图片代替文本。 方式一 /*****************************************************************************/ /*****************************************************************************/ /*****************************************************************************/ 强调一下，图片代替文本并不是说那个文本就不用写了，看html代码的时候显示的是普通文本，在页面上显示的是图片【对于搜索引擎抓取网站内容，残障人士阅读尤为重要】。 方式1，很巧妙的把图片作为div的背景图片，然后将div本应该显示的文本设置了text-indent：-5000px；缩进了一个非常远的地方，页面上看不到。  方式2 方式2也能很好的实现。 强调一下，图片代替文本并不是说那个文本就不用写了，看html代码的时候显示的是普通文本，在页面上显示的是图片【对于搜索引擎抓取网站内容，残障人士阅读尤为重要】。 在某些标题前添加一些项目符号 backgroud-position 取值范围：left bottom center right top ;百分数; 2px 2px 【任意像素值】 backgroud-position显示的是图片的位置：比如top left 就是从图片的左上角开始显示。 5px 5px 是从图5px 5px 处开始显示 注意百分比和具体值不同 完整的一个小例子 有这样一张图片，我们需要做成网页上的查询框 /*******************************分析图片********************************/ /*********************************************************************/ /*********************************************************************/ 上面的CSS用到了属性选择器，input[name=”search”]表示input标签且name=’search’那个元素。【注意属性选择器IE6不支持，所有现代浏览器都支持，想要支持浏览器，那么就给元素加上id或者class】 完成品： 总结： 本教程基本列出了所有图片常用的方式，图片实现圆角也很常用，难度稍大，等掌握基础后再考虑教你。 学完了本教程，现在会了盒子模型，定位，以及如何使用图片装饰。嗯，理论上讲已经可以出师了。 目前为止的3个教程，出现的都是基本你所不知道的东西，很正常，我接触了2年我也不知道这3个教程上的很多东西。所以好好消化这3个教程，这些东西属于核心了，相当于屌丝过滤器，会了你就不是屌丝了哈哈~，灵活使用哈。 学完了，有时间根据所学的知识，写一个简单的页面： 要求： 使用渐变的背景色 页面要求有banner , banner上有个logo【绝对定位到banner上】 自己写个导航 主内容左边放下图的新闻 右边放一些文章或者随便什么东西 页脚可以放友情链接和版权 可模仿其他网站的样子，试试吧。