CSS之背景样式

最新推荐文章于 2023-12-21 09:36:26 发布

web菜鸟程序猿

最新推荐文章于 2023-12-21 09:36:26 发布

阅读量545

点赞数

分类专栏： CSS 文章标签： CSS HTML

本文链接：https://blog.csdn.net/zhou0107/article/details/9145547

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-cn">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>CSS背景色</title>
	<style type="text/css">
		p{
			/*背景色*/
			background:gray;
		}
		div{
			/*背景图片*/
			width: 470px;
			height: 424px;
			background-image:url(bibi.jpg);
		}
		.div_1{
			/*背景水平重复*/
			width: 600px;
			height:800px;
			background-image:url(bibi.jpg);
			background-repeat:repeat-x;
		}
		.div_2{
			/*背景垂直重复*/
			width: 600px;
			height:800px;
			background-image:url(bibi.jpg);
			background-repeat:repeat-y;
		}
		.div_3{
			/*背景不允许重复*/
			width: 600px;
			height:800px;
			background-image:url(bibi.jpg);
			background-repeat:no-repeat;
		}
		.div_4{
			/*背景定位*/
			background-image:url(bibi.jpg);
			background-repeat:no-repeat;
			/*居中
			background-position:center;
			*/
			/*右上角
			background-position:right;
			*/
			/*中部上方*/
			background-position:top;
			/*其他关键词(关键字成双出现)：bottom ==(bottom center 或 center bottom),left == (left center 或 center left)
			  百分数值：利用百分进行定位
			  background-position:50% 50%;
			  长度值：元素内边距区左上角的偏移。
			  background-position:50px 100px;
			*/
			height: 500px;
			}
			body{
				/*背景关联*/
				background-image:url(bibi.jpg);
				background-repeat:no-repeat;
				background-attachment:fixed;
			}
	</style>
</head>
<body>
		<p>背景色</p>
		<div>背景图片</div>
		<div class="div_1">背景水平重复</div>
		<div class="div_2">背景垂直重复</div>
		<div class="div_3">不允许重复</div>
		<p   class="div_4">背景定位</p>		
</body>

</html>

在学习过程中背景的设置属性多种多样，在使用背景重复（background-repeat:no-repeat/repeat-x/repeat-y）时必须存在引用的背景图片（background-image:url(bibi.jpg)）

web菜鸟程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之背景样式

CSS背景色 p{ /*背景色*/ background:gray; } div{ /*背景图片*/ width: 470px; height: 424px; background-image:url(bibi.jpg); } .div_1{ /*背景水平重复*/ width: 600px; height:800px;
复制链接

扫一扫

专栏目录