css 背景图片相关属性

最新推荐文章于 2023-10-27 17:17:26 发布

心郎

最新推荐文章于 2023-10-27 17:17:26 发布

阅读量454

点赞数

分类专栏：前段_css

本文链接：https://blog.csdn.net/u011301203/article/details/53584366

版权

前段_css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				border: 22px solid red;
				height: 300px;
				width: 300px;
				background:url(../images/cbd.jpg) no-repeat;
				padding: 50px;
				/* 保证背景图片最大化的在盒子中等比例显示，但不保证能铺满盒子*/
				/*background-size: contain;*/
				
				/* 百分比*/
				/*background-size:50% 50%;*/
				
				/* cover 会保证完全覆盖盒子，但不能保证完整显示*/
				background-size:cover;
				
				/* 设置背景原点*/
				/* 占用padding*/
            	/*background-origin: padding-box;*/
	            /* 占用border*/
	            /*background-origin: border-box;*/
	            /* 不占用 border和padding*/
	            /*background-origin: content-box;*/
	            
            	/* 背景裁剪*/
	            /*background-clip:border-box;*/
	            /*background-clip:padding-box;*/
	            /*background-clip:content-box;*/
	            
	            /*background: url(images/bg1.png) no-repeat left top
                        ,url(images/bg2.png) no-repeat right top
                        ,url(images/bg3.png) no-repeat right bottom
                        ,url(images/bg4.png) no-repeat left bottom
                        ,url(images/bg5.png) no-repeat center;*/
                        
			}
		</style>
	</head>
	<body>
		
		
		<div>
			<img src="" alt="" />
		</div>
	</body>
</html>

心郎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 背景图片相关属性

img{ border: 22px solid red; height: 300px; width: 300px; background:url(../images/cbd.jpg) no-repeat; padding: 50px; /* 保证背景图片最大化的在盒子中等比例显示，但不保证能铺满盒子*/ /*background-size:
复制链接

扫一扫

专栏目录