CSS背景圖套路二：單一元素設定多背景圖

文章未經同意，不得轉載。

如下圖需求（圖片來自網路）：

針對以上需求，可以讓設計師幫忙把多個撲克牌合成一張圖，前端只需求設定一下背景就OK 。

但是，如果設計師只提供了多個分開的撲克牌圖片，怎麼在同一個元素上設定多個背景圖呢。套路很單純：

.bgSection {    background: url("1.png"),                url("2.png"),                #ffffff;}

比如：設定一個背景為白色，上下有邊框的元素（通過調整背景的位置）

.bgSection {    background: url("line_top_e6@2x.png") repeat-x 0 top / 1px 1px,                url("line_bottom_e6@2x.png") repeat-x 0 bottom / 1px 1px,                #ffffff;}

附：
【CSS】背景圖套路一：用border-image做背景圖

Sign：路漫漫其修遠兮，吾將上下而求索。

Author：致知