记录--CSS背景属性

最新推荐文章于 2024-10-02 15:35:50 发布

wxt_

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量205

点赞数 3

文章标签： css css背景属性

本文链接：https://blog.csdn.net/wxt_wjc/article/details/103281053

版权

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>05css背景属性</title>
  <style>
  /*交集选择器*/
	div.box{
		background-color: #ccc;
		width: 400px;
		height: 400px;
		/*设置背景图*/
		background-image: url(../../src/l.jpg); 
		/* 设置背景图是否平铺 */
		background-repeat: no-repeat;
		/* background-repeat: repeat-x;水平方向平铺
		background-repeat: repeat-y;垂直方向平铺 */
		/*设置背景图位置坐标(x,y),精灵图原理*/
		/*x 为正数 背景图往右移动*/
		/*x 为负数 背景图往左移动*/
		/*x 为正数 背景图往下移动*/
		/*x 为负数 背景图往上移动*/
		background-position: -50 50 ;
		background-position: center ;/*左右上下都居中*/

		/*设置背景图的尺寸(width/height)*/
		/* cover , contain */
		background-size: 150px;
		/* cover  填充满整个盒子
		contain 填满盒子的其中一侧,哪一侧大铺满哪边 */
		/* background-size: cover; */
		background-size: contain;
	}
	/*备注: 居中图片的一种方法就是利用背景属性*/
  </style>
 </head>
 <body>
	<div class="box"></div>
 </body>
</html>