CSS设置背景图片

最新推荐文章于 2024-10-06 17:22:52 发布

量变决定质变

最新推荐文章于 2024-10-06 17:22:52 发布

阅读量1.5k

点赞数

分类专栏： ————CSS

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

版权

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

39 篇文章 2 订阅

订阅专栏

CSS设置背景图片

CSS给页面添加背景图片的方法，就是使用background-image属性，直接定义其URL值，此时，浏览器就会自动将图片覆盖整个页面。

如果给网页的body标记，添加background-image：URL背景图片，那么页面的所有地方，都会以该图片作为背景。

其中，URL的值可以用绝对路径，也可以使用相对路径。

<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);
		}
			-->
		</style>
	</head>
	
	<body>
	</body>
</html></span>

如果，背景图片使用的是透明的GFI格式图片，此时设置背景颜色background-color，背景颜色会透过图片的透明部分显示出来，与图片同时生效。

<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-color：#FFFF00；
		}		
			-->
		</style>
	</head>
	
	<body>
	</body>
</html></span>

可以看到背景的黄色和背景图片，同时覆盖了整个页面。