您的位置：首页 > Web前端 > CSS

CSS添加多个背景图片

2016-09-30 17:55 323 查看

CSS添加多个背景图片

如果给页面添加多个背景，但是，在CSS中一个标记只能用一次background属性。

因此，只有给多个标记添加不同背景来实现，比如，在body标记设置了背景图片的基础上，可以再添加table和div等标记，来设置其他的背景图。

<span style="font-size:24px;"><html>
<head>
<title>
多个背景图片
</title>
<style>
<!--
body{
background-image:url( http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg); background-repeat:no-repeat;
padding:0px;margin:0px;
background-attachment:fixed;
}
div{
background-image:url( http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg); background-repeat:repeat-y;
background-position:5px 0px;
padding-left:110px;padding-top:10px;
padding-right:10px;padding-bottom:15px;
}
h1{
font-family:黑体:
text-decoration:underline;
}
-->
</style>
</head>

<body>
<div>
<h1>银杏的优点</h1>
1、叶色秀雅，花色清淡。<br>
2、树体高大，寿命绵长，树粗可达4米，寿命可达3000年之多。树长与古老寺庙相匹配，以名山大川、风景名胜为伴。<br>
3、树干光洁，愈伤力强，轻微的损伤很快便可愈合。<br>
4、发芽晚落叶早，有利于早春和晚秋树下能及时得到暖和的阳光。<br>
……
</div>
</div>
</body>
</html>
</span>

  Body标记设置了大背景图片，正文的div标记，设置了在竖直方向上重复的小图片。

  除了这两个标记，HTML中几乎所有的标记都可以设置背景，很多页面的各种效果，都是通过设置不同标记的不同背景实现的。

  背景样式综合设置

  和border、font属性一样，background也可以将各种设置集成到一个语句上，不仅可以节省代码，而且加快了网络下载页面的速度。

<span style="font-size:24px;">background-color:blue;
background-image:url();
background-repeat:no-repeat;
background-attachment:fixed;
background-position:5px 10px;</span>

写为一句代码

<span style="font-size:24px;">background:blue url() no-repeat fixed 5px 10px;</span>

两种方式在显示上是完全一样的，第一种代码长了一些，但是可读性会好点。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航