<!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背景缩放+浏览器前缀
猜你喜欢
转载自blog.csdn.net/weixin_40422393/article/details/89287877
今日推荐
周排行