让子元素的背景图片右对齐，这样就可以覆盖父元素的背景，而padding-left是为了让父元素露出按钮左侧部分不致于被子元素的背景覆盖。
优点：自适应宽度变化；各浏览器显示效果一致；
缺点：
- 由于使用子元素的背景图覆盖父元素的，所以不能使用背景透明的图片来实现，否则按钮右侧圆角部分会使得父元素的背景图片露出，大街网使用的是白色背景，因此该按钮如果在非白色背景的场景使用会有白边：
- 如果有多个不同高度的按钮，就要制作多张图片，或者使用图片拼接拼成一张，不便维护和拓展；
- 引进无语义化的html标签；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0; padding: 0}
.bg{height: 50px;}
.leftBg{
height: 45px;
line-height: 45px;
color: #fff;
background: url(left.png) no-repeat left top;
padding-left: 34px;
float: left;
position: absolute;
}
.rightBg{
height: 45px;
padding-right: 45px;
background: url(right1.png) no-repeat right top;
}
</style>
</head>
<body>
<div class="bg">
<div class="leftBg"><div class="rightBg">5s跳过,广告是3分钟</div></div>
</div>
</body>
</html>
浙公网安备 33010602011771号