CSS3 背景

最新推荐文章于 2024-01-10 12:25:01 发布

凌冰_

最新推荐文章于 2024-01-10 12:25:01 发布

阅读量207

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/hlx20080808/article/details/69567809

版权

CSS3 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

一、background-image属性设置一个元素的背景图像。

元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向

二、background-size属性指定背景图片大小。

index.html

<style type="text/css">
  div{
	   width:30%;
	   height:250px; /* div大小 */
	   margin:15px;
	   border:3px double red;
	   float:left;
  }
 
/*background-image属性添加背景图片。
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。*/
 div:nth-of-type(1){
	
	 background-image:url(img_flwr.gif),url(5.jpg);  /* 花，背景 */
	 background-repeat:no-repeat; /* 两个图片不平铺 */
	 background-position:right bottom,left top;  /*相对位置花在右下角； 背景在左上角 */ 
 }
 
 
/* background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。
CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素
或百分比大小。*/
div:nth-of-type(2){
	background:url(img_flwr.gif) no-repeat;
	background-size:80px 60px;   /* 重置背景图像： */
	padding-top:50px;
	
}

div:nth-of-type(3){
	background:url(img_flwr.gif) no-repeat;
	background-size:100% 100%; /*伸展背景图像完全填充内容区域：*/
	padding-top:50px;
	
}
</style>
</head>

<body>
<div>
<h1>one Lorem Ipsum Dolor</h1>
</div>
<div>
<p> two 你指定的大小是相对于父元素的宽度和高度的百分比的大小</p>
原来图片：<img src="img_flwr.gif" width="224" height="162">

</div>

<div>
<p> three 你指定的大小是相对于父元素的宽度和高度的百分比的大小</p>
</div>

效果

one :多张图片

two:重置背景图像

three :伸展背景图像完全填充内容区域