<!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>
css 背景图片相关属性
最新推荐文章于 2024-07-05 23:24:20 发布