教你改變微信圖文的背景!(純色/花紋/動態)

原標題：教你改變微信圖文的背景！（純色/花紋/動態）

純色背景、花紋背景、動態背景……越來越多的品牌新媒體正在嘗試改變微信圖文的背景色。但為什麼有的文章看起來辣眼睛，有的看起來卻極具創意呢？今天我們應讀者要求，詳解一下具體的微信圖文背景設計思路。（另有《教你改變微信圖文的字體！

純色篇

1.作為內容背景色，實現特殊閱讀體驗

比如我們 JZ 多媒體解決方案此前曾經高頻在午夜發布推送，為了照顧用戶的夜間閱讀習慣，因此使用過一套黑暗向的排版設計▼

職場

學術

設計

極客

就是這種純色背景樣式

足以讓品牌在眾多新媒體中特立獨行，並且能夠實現一些比較特殊的效果比如

- 用戶在暗光下閱讀時發揮類似夜間模式的效果；

- 可以嘗試營造出諸如冷峻、恐怖、極客等風格；

- 加載入特殊模塊比如反色二維碼；

當然，每一個細節都可以根據品牌的排版習慣切換成純色底，包括下方的這個關鍵字區。

回復VI看圖文排版視覺系統原理

回復H 5獲取 H5 殺手必備資源

回復排版學習超高顏值排版技巧

| JZ往期商業夥伴 |

APEC 峰會 | 浙江省人民廣播電臺 | 湖北省電視臺 | 蓋茨基金會

河南衛視 | 交通銀行 | 建設銀行 | 平安銀行 | 民生銀行 | 真格基金

南方周末 | 上海閔行教育學院 | 上海創智雲課堂 | 新東方集團

偉巴斯特 | 雪佛蘭汽車 | 觀致汽車 | 吉利汽車 | TNS新華信

高力國際｜第一太平戴維斯｜德國萊茵｜肯德基｜追星集團

H5／平面／視頻／多媒體服務與定製

[phone]

這裡就可以指向閱讀原文啦。

2.用於銜接一圖流拼接

圖文的背景色不見得非要用作內容背景，也可以僅僅作為「銜接」避免一圖流微信圖文切圖後從縫隙處露出白底。而且目前，品質越高的帳號越常用這種方式。

比如諸多奢侈品品牌，以及各行業中的頭部企業新媒體，經常會在重要產品發布時使用一圖流▼

這類一圖流作品一旦本身有純色打底，那麼背景色就應當切換成一樣的底色。即便我們可以使用 HTML5 的一些代碼讓圖片做到無縫，但是純色背景其一可以確保萬無一失不露出白色縫隙，其二如果實際背景色需要的區域大，它更節省流量，用戶打開也就更快。

背景色的調整，其實無論是純色、花紋抑或動態都和 HTML5 中的<background>有密切聯繫。對於一個純色背景來說，代碼寫法其實非常簡單▼

< sectionstyle="background-color: rgb(30, 30, 30);">

</ section>

以上就是我們 JZ 多媒體解決方案黑暗版的背景色，不是純黑噢！否則會太刺眼！在設計一圖流時，也要注意從圖片中拾色避免色差。

花紋篇

對於前端開發來說，最常用的採取 SVG 花紋背景。因為它加載速度快而且絕對清晰。不過對於微信圖文而言，一方面普通新媒體運營人書寫 SVG 背景的難度太大沒有意義，其次微信中的圖片本身都不高，所以這裡還是建議用合適的位圖作為花紋素材。

這裡我們就來看一個位圖背景應用非常出彩的例子▼

/

在溫度宜人的秋天

在小風習習的星階

在穿著丹寧的舞臺

黑屋樂隊

生活與我無關

長大是造化弄人的明天

肆君子樂隊

走出90年代

穿越七日的虹

島國遇仙的異鄉客

SOUL DA &BAND

杭 州 來 福 士 中 心

2017第一期主題音樂節青春來襲

聽音樂為什麼要正襟危坐

我們就是要放鬆！

「白色丹寧」杭州來福士中心誠意出品

給你史上最舒適放鬆的音樂大聚會

這樣一個段落通過動圖和貼圖式排版，可以說頂部圖層的內容已經非常精彩了。而為了實現整體感，排版時又加入了淡淡的特色紋理，使得整個視覺區域成為了海報設計品，可以說是微信圖文對「圖」和「文」最好的結合例子之一。

而對於紋理式背景有幾點設計要求：

1.色彩應當偏淺色

2.背景是重複平鋪實現，而非單圖

3.上&下、左&右必須設計為銜接

歸根結底一句話，就是不能讓紋理喧賓奪主。那麼在設計好紋理後，到底怎麼載入微信圖文背景呢？這一次我們具體用到的不再是<background-color>而是<background-image>標籤。比如我們讓大家看一下案例的代碼寫法▼

< sectionstyle="background-position: 51.0827% -9.4556%;background-repeat: repeat;background-size: 107.915%;background-attachment: scroll;padding: 10px;background-image: url("http://這裡填寫圖片連結;);">

</ section>

（其中重複方式和圖片源是必填項）

動態篇

按照紋理的方法，我們自然可以把圖片源改成動態圖，但是怎麼玩出花樣呢？我們其實在《二十二 · 代碼致敬 · 圖文特效(4)》就已經具體介紹過，JZ 採用了更為複雜的基於是<-webkit-mask->遮罩式背景。也就在 GIF 背景上再加了一層 GIF 遮罩▼

搜索

走訪

符桂英

韋紹蘭

何玉珍

郝菊香

曹黑毛

李鳳雲

毛銀梅

趙蘭英

劉風孩

劉改連

林愛蘭

完整名單

陳亞扁

黃有良

李秀梅

駢煥英

李愛連

符美菊

李美金

王志鳳

陳連村

任蘭娥

張先兔

《二十二》

哪怕

她們一直在等待日本政府的道歉

日本政府一直在等待她們的死亡

▼當然你還可以閱讀另外幾期教程▼

本文已納入 JZ 多媒體解決方案新發售圖書版權，禁止任何形式轉載或洗稿，禁止任何第三方編輯器在非授權情況下轉存為樣式模版。

相信在這篇教學下，你已經對微信圖文背景的修改有充分認識了。那麼不妨動手試一試改造自己品牌的微信圖文吧！如果有任何疑問需要諮詢，也可以致電聯繫我們。（另有《教你改變微信圖文的字體！

回復 排版閱讀網際網路文案排版教程

回復 標題了解優質標題的醞釀方法

回復 配圖學習圖片素材的搭配方法

回復 H 5開啟移動營銷技術學習課

回復 廣告看更多行業廣告知識大全返回搜狐，查看更多

責任編輯：