让子元素的背景图片右对齐,这样就可以覆盖父元素的背景,而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>