预览加载中，请您耐心等待几秒...

CSS背景文本字体.doc

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共21页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

CSS背景实例： 设置背景颜色： <html> <head> <styletype="text/css"> body{background-color:yellow} h1{background-color:#00ff00} h2{background-color:transparent} p{background-color:rgb(250,0,255)} p.no2{background-color:gray;padding:20px;} </style> </head> <body> <h1>这是标题1</h1> <h2>这是标题2</h2> <p>这是段落</p> <pclass="no2">这个段落设置了内边距。</p> </body> </html> 设置文本背景的颜色： <html> <head> <styletype="text/css"> span.highlight { background-color:yellow } </style> </head> <body> <p> <spanclass="highlight">这是文本。</span>这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。<spanclass="highlight">这是文本。</span> </p> </body> </html> 设置图像为背景： <html> <head> <styletype="text/css"> body{background-image:url(/i/eg_bg_04.gif);} </style> </head> <body></body> </html> 如何重复背景图像： <html> <head> <styletype="text/css"> body { background-image: url(/i/eg_bg_03.gif); background-repeat:repeat } </style> </head> <body> </body> </html> 如何在垂直方向上重复背景图像： <html> <head> <styletype="text/css"> body { background-image: url(/i/eg_bg_03.gif); background-repeat:repeat-y } </style> </head> <body> </body> </html> 如何只显示一次背景图像： <html> <head> <styletype="text/css"> body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat } </style> </head> <body> </body> </html> 如何放置背景图像： <html> <head> <styletype="text/css"> body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } </style> </head> <body> <body> <p><b>提示：</b>您需要把background-attachment属性设置为"fixed"，才能保证该属性在Firefox和Opera中正常工作。</p> </body> </body> </html> 如何用％来定位背景图像: <html> <head> <styletype="text/css"> body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:30%20%; } </style> </head> <body> <p><b>注释：</b>为了在Mozilla中实现此效果，background-attachment属性必须设置为"fixed"。</p> </body> </html> 如何用像素来定位背景图像： <html> <head> <styletype="text/css"> body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-attachme