效果图
背景定位方案
- background-position
- background-origin
- calc()
background-position的方案
详细用法参照background-position的用法
提示:background-position:right 20px bottom 10px;
这表示距离右边缘20px ,下边缘10px。
background-origin方案
详细用法参照:background-origin
提示:
background-origin:的参数可以填写
border-box:边框的外沿框
padding-box:内边距的外沿框
content-box:内容区的外沿框
calc()方案
详细用法参照:calc()的用法
calc() = calc(四则运算)
说明:
用于动态计算长度值。
需要注意的是,运算符前后都需要保留一个空格,
例如:width: calc(100% - 10px);
案例源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>灵活的背景定位</title>
<style>
h1{
text-align: center;;
}
div{
float: left;
background: rgba(166, 175, 255, 0.98);
margin: 20px 20px;
max-width: 200px;
min-width: 150px;
min-height: 150px;
background: url("../images/music_converter.png") no-repeat #58a;
}
.div_1{
background-position: bottom 10px right 20px;
}
.div_2{
background: url("../images/music_converter.png") no-repeat #58a bottom right;
background-position: bottom 10px right 20px;
}
.div_3{
padding: 0 20px 10px 0;
max-width: 180px;
min-width: 130px;
min-height: 140px;
background-position: bottom right;
background-origin: content-box;
}
.div_4{
/*calc的运算符两侧要加空白符,未来可能在calc里面使用关键字,可能包含连字符(即减号)*/
background-position: calc(100% - 20px) calc(100% - 10px);
}
</style>
</head>
<body>
<article>
<h1>使图标距离右下角,距离底边10px,距离右侧20</h1>
<!--background-position方案-->
<div class="div_1">div_1</div>
<!--background-position方案 回退方案 万一浏览器不支持position ,会直接在右下角显示-->
<div class="div_2">div_2 回退方案</div>
<!--background-origin方案-->
<div class="div_3">div_3 </div>
<!-- cal()方案 -->
<div class="div_4">div_4</div>
</article>
</body>
</html>