JavaWeb_CSS（17）_背景设置

最新推荐文章于 2024-07-04 17:35:21 发布

魏宇轩

最新推荐文章于 2024-07-04 17:35:21 发布

阅读量8.6k

点赞数 8

分类专栏： CSS（更新完）文章标签： JavaWeb CSS 背景设置

本文链接：https://blog.csdn.net/qq_36260974/article/details/88431513

版权

CSS（更新完）专栏收录该内容

21 篇文章 3 订阅

订阅专栏

本系列博客汇总在这里：JavaWeb_CSS 汇总

一、背景颜色和图片

示例

<!DOCTYPE html>
<html>	
	<head>
		<meta charset="UTF-8">
		<title>www.weiyuxuan.com</title>
	</head>		
		<style type="text/css">
			body
			{
				margin: 5px;
				background-color: olive;
				font-size: 15px;
			}
			img
			{
				width: 200px;
				margin: 5px;
				float: left;
			}
			span
			{
				font-family: 隶书;
				font-size: 60px;
				float: left;
				margin: 3px;
			}				
		</style>	
	<body>		
	<img src="test.jpg"/>		
	<span>昆明斗南花卉市场 </span>		
	<p>
	昆明斗南濒临滇池东岸，享有“金斗南”之称。斗南花卉市场，现已发展成为“中国乃至亚洲最大的鲜切花交易市场”，是著名的花都。
	云南省80%以上的鲜切花和周边省份、周边国家的花卉入场交易。在全国80多个大中城市中占据70%的市场份额，出口46个国家和地
	区，有全国10枝鲜切花7枝产自云南之说。多年来借助“斗南”花卉这一中国驰名商标的品牌效应和市场优势，斗南已成为中国花卉市
	场的“风向标”和花卉价格的“晴雨表”。
	<p/>			
	</body>		
</html>

在这里插入图片描述

二、背景图片平铺

background-image: url(wyx.jpg);：给 html 元素设置背景图片，一定要使用 url()。
background-repeat: repeat-x;：横向重复。
background-repeat: repeat-y;：纵向重复
background-repeat: no-repeat;：不重复

示例

<!DOCTYPE html>
<html>	
	<head>
		<meta charset="UTF-8">
		<title>www.weiyuxuan.com</title>
	</head>	
		<style type="text/css">		
			body
			{
				background-image: url(wyx.jpg);/*给html元素设置背景图片，一定要使用url()*/
				/*background-repeat: repeat-x;在横向重复*/
				/*background-repeat: repeat-y;纵向重复*/
				/*background-repeat: no-repeat;不重复*/					
				background-repeat: repeat;/*默认是重复的横向和纵向*/
			}				
		</style>	
	<body>		
	</body>	
</html>