首先看UI小姐姐给前端的设计稿，大标题两边带了2个小翅膀，针对这样的效果，css如何实现？我来总结一下我常用的办法：

1.flex布局，父盒子套三个子元素，分别是“左翅膀”-标题-“右翅膀”，然后父元素设置：{display: flex;justify-content: center;align-items:center;}

2.伪元素实现，标题一个元素H3，css预设为相对定位-固定宽度-水平居中{position: relative;width:240px;margin:0 auto;text-align: center;}然后分别用:before和:after将两翅膀定位在左右，不再啰嗦css代码！

3.background多背景方案，也就是今天主要的重点了，先看一下新手代码：{background: url(../images/book-tt-left.png) no-repeat 560px 16px/80px,url(../images/book-tt-right.png) no-repeat 760px 16px/80px;}
当页面分辨率不变时，翅膀和标题位置是完美的，但是，窗口大小缩放之后，翅膀不居中了，看下图：

是不是想说一句“窝草！”，别急，七娃有补救方案：水平位置变成动态计算就可以了，例如左侧翅膀水平位置： calc((100% - 220px)/2)，用100%分辨率减去标题宽度除以2就是左翅膀的水平位置，同理右边的再加上标题宽度就可以了！
完整css：

{ background: url(../images/book-tt-left.png) no-repeat calc((100% - 220px)/2) 16px/80px,url(../images/book-tt-right.png) no-repeat calc((100% - 220px)/2 + 220px)  16px/80px;}

也许还有其他方法实现,有的人也会直接把标题+翅膀变成一张图片,也未尝不可,反正能实现效果就好!多想想，多练练，每个人都能找到属于最佳方法！