CSS添加多个背景图片

最新推荐文章于 2024-06-16 22:13:37 发布

量变决定质变

最新推荐文章于 2024-06-16 22:13:37 发布

阅读量7.4k

点赞数

分类专栏： ————CSS

本文链接：https://blog.csdn.net/nangeali/article/details/52712928

版权

————CSS 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

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>

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

量变决定质变

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS添加多个背景图片

CSS添加多个背景图片如果给页面添加多个背景，但是，在CSS中一个标记只能用一次background属性。因此，只有给多个标记添加不同背景来实现，比如，在body标记设置了背景图片的基础上，可以再添加table和div等标记，来设置其他的背景图。多个背景图片 <!-- body{ backg
复制链接

扫一扫

专栏目录