css教程之背景图像的使用

《css教程之背景图像的使用》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS之背景图像的使用1)设置背景图片现在网站背景色，渐变特别流行，给人的感觉也很好。步骤l制作一张渐变图片，很窄，但很长【我拿photoshop做了一个1000*2的渐变条】。l设置背景图片Background-position:教程末尾有详细介绍简写：以上两个步骤初步形成了背景图片，但是存在一个问题，假设我们的页面2000px，我的背景图片只有1000px长，那么用户拉到后面岂不是没有背景图像了。嗯，这个问题如何解决呢？哈哈，设置个背景色：#30E6F这个颜色取渐变的最深的地方。这样当背景图达不到的地方显示的就是背景

2、色，背景色取色也和渐变图像很切合。完美哈。图片代替文本有的时候网页上显示某些问题需要使用艺术字体，这时候就可以使用图片代替文本。l方式一/*****************************************************************************//*****************************************************************************//************************************

3、*****************************************/强调一下，图片代替文本并不是说那个文本就不用写了，看html代码的时候显示的是普通文本，在页面上显示的是图片【对于搜索引擎抓取网站内容，残障人士阅读尤为重要】。方式1，很巧妙的把图片作为div的背景图片，然后将div本应该显示的文本设置了text-indent：-5000px；缩进了一个非常远的地方，页面上看不到。l方式2方式2也能很好的实现。强调一下，图片代替文本并不是说那个文本就不用写了，看html代码的时候显示的是普通文本，在页面上

4、显示的是图片【对于搜索引擎抓取网站内容，残障人士阅读尤为重要】。在某些标题前添加一些项目符号1)backgroud-position取值范围：leftbottomcenterrighttop;百分数;2px2px【任意像素值】backgroud-position显示的是图片的位置：比如topleft就是从图片的左上角开始显示。5px5px是从图5px5px处开始显示注意百分比和具体值不同完整的一个小例子有这样一张图片，我们需要做成网页上的查询框/*******************************分析图片***

5、*****************************//*********************************************************************//*********************************************************************/上面的CSS用到了属性选择器，input[name=”search”]表示input标签且name=’search’那个元素。【注意属性选择器IE6不支持，所有现代浏览器都支持，想要

6、支持浏览器，那么就给元素加上id或者class】完成品：总结：本教程基本列出了所有图片常用的方式，图片实现圆角也很常用，难度稍大，等掌握基础后再考虑教你。学完了本教程，现在会了盒子模型，定位，以及如何使用图片装饰。嗯，理论上讲已经可以出师了。目前为止的3个教程，出现的都是基本你所不知道的东西，很正常，我接触了2年我也不知道这3个教程上的很多东西。所以好好消化这3个教程，这些东西属于核心了，相当于屌丝过滤器，会了你就不是屌丝了哈哈~，灵活使用哈。学完了，有时间根据所学的知识，写一个简单的页面：要求：l使用渐变的背景色l页面

7、要求有banner,banner上有个logo【绝对定位到banner上】l自己写个导航l主内容左边放下图的新闻l右边放一些文章或者随便什么东西l页脚可以放友情链接和版权l可模仿其他网站的样子，试试吧。