首先看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;}
當頁面分辨率不變時，翅膀和标題位置是完美的，但是，視窗大小縮放之後，翅膀不居中了，看下圖：
{ 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;}