<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景缩放</title>
<style>
div{
width: 400px;
height: 400px;
background-color: pink;
background: url(icon3.png) no-repeat;
border:1px solid red;
/*背景属性:
1、background-size:w h ; 规定背景图片的尺寸
background-size:200px 200px; 如果背景图片是长方形,就会被拉伸变形
background-size:100px; 如果只有一个值,则默认后面的值等比例缩放 没有变形; 运用比较多,特别移动端,精灵图也要缩放相等倍数
background-size:cover; 等比例缩放到把div盒子布满,但是会有一部分无法显示出来,没有变形
background-size:contain; 等比例缩放到最大,也就是背景图片放大到最大,背景图片需要全部显示,没有变形*/
/*浏览器前缀:
1、-webkit-background-size:100px; Google Chrome/Safari/Android Browser 常用
2、-moz-background-size:100px; 火狐Firefox 常用
3、-o-background-size:100px; 欧朋Opera
4、-ms-background-size::100px; 微软Internet Explorer*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
015背景缩放+浏览器前缀
最新推荐文章于 2022-06-16 08:38:34 发布