วิธีทำให้สมาชิกทุกคนว้าวด้วยภาพพื้นหลังของอีเมลอย่างง่ายดาย (+ รหัสที่ต้องทำ!)

เผยแพร่แล้ว: 2021-07-23

อีเมลสามารถคาดเดาได้เล็กน้อยด้วยรูปภาพที่นี่ มีบล็อกข้อความอยู่ที่นั่น... วิธีหนึ่งในการทำให้ประสบการณ์ของสมาชิกมีชีวิตชีวาขึ้น? ภาพพื้นหลัง เป็นสิ่งที่คาดไม่ถึงและเพิ่มมิติใหม่ให้กับงานออกแบบของคุณ ทำให้อีเมลของคุณ "โดดเด่น" เมื่อทำได้ดีจะทำให้อีเมลของคุณรู้สึกเหมือนมีเงินล้าน แต่ดึงออกได้ง่ายอย่างเหลือเชื่อ

อ่านต่อเพื่อ:

ประโยชน์ของภาพพื้นหลัง
ตัวอย่างอีเมลที่สร้างแรงบันดาลใจ
ข้อควรพิจารณาในการออกแบบ
วิธีโค้ดรูปภาพพื้นหลัง

ภาพพื้นหลังคืออะไร? (และประเด็นคืออะไร?)

ภาพพื้นหลังคือรูปภาพที่ใช้กับพื้นหลังหรือด้านหลังองค์ประกอบ แทนที่จะเป็นจุดศูนย์กลางหลักของอีเมล เช่น รูปภาพของฮีโร่ พวกเขามักจะมีความละเอียดอ่อนและเป็นส่วนเสริมของเนื้อหาอื่นๆ ในแคมเปญ

ประโยชน์หลักของการใช้ภาพพื้นหลังคือช่วยให้คุณสามารถวางเนื้อหา HTML เพิ่มเติมไว้ด้านบนได้ ต่างจากรูปภาพอื่นๆ ที่มีแต่ตัวรูปภาพเองเท่านั้นที่สามารถมีอยู่ในพื้นที่นั้น ภาพพื้นหลังให้ความเป็นไปได้ในการจัดเลเยอร์ ดังนั้นคุณจึงสามารถมีรูปภาพเพิ่มเติม ข้อความ หรือคำกระตุ้นการตัดสินใจ (CTA) เพิ่มเติมอยู่ภายในพื้นที่เดียวกันนั้น

ตัวอย่างข้อความ HTML สดและปุ่มกันกระสุนบนภาพพื้นหลัง

การใช้ข้อความ HTML แบบสดที่ด้านบนของรูปภาพพื้นหลัง แทนที่จะรวมข้อความนั้นเป็นส่วนหนึ่งของรูปภาพ หมายความว่าข้อความของคุณสามารถอ่านได้เมื่อปิดรูปภาพ ทำให้เป็นเทคนิคที่ยอดเยี่ยมในการสร้างอีเมล HTML ที่ดีขึ้นและเข้าถึงได้ง่ายขึ้น

นอกจากจะช่วยสร้างแคมเปญที่มอบประสบการณ์การอ่านที่ดีขึ้นแล้ว ภาพพื้นหลังยังนำเสนอความเป็นไปได้ในการออกแบบมากมาย ซึ่งทำให้แคมเปญของคุณแตกต่างจากคู่แข่ง

วิธีที่สร้างสรรค์ที่แบรนด์ใช้ภาพพื้นหลัง

Miro วางภาพพื้นหลังที่มีรูปร่างต่างๆ ไว้ด้านหลังส่วนฮีโร่ ดึงความสนใจไปที่พาดหัวและข้อความหลักของอีเมล ซึ่งซ้อนทับโดยใช้ข้อความสด

อีเมล Miro พร้อมภาพพื้นหลัง — ที่มา: อีเมลที่ดีจริงๆ

Uplers ใช้ภาพพื้นหลังเพื่อเน้นส่วนลดสำหรับบริการของพวกเขา โดยมีรูปคูปองวางไว้หลังรหัสคูปอง

ภาพพื้นหลังอีเมลอัพเลอร์สำหรับรหัสคูปอง — ที่มา: อีเมลที่ดีจริงๆ

Figma ได้ เพิ่มรูปแบบพื้นหลังซ้ำๆ ในส่วนเนื้อหาของอีเมลนี้ เพื่อแนะนำให้เรารู้จักกับผลิตภัณฑ์ไวท์บอร์ดใหม่ของพวกเขา รูปแบบที่แสดงสะท้อนพื้นหลังที่พบในผลิตภัณฑ์

ภาพพื้นหลัง Figma ในอีเมล — ดูอีเมลนี้ใน Litmus Builder

Chipotle วางภาพพื้นหลังขนาดจัมโบ้ไว้ด้านหลังฮีโร่จัมโบ้และส่วนลำตัวอันทรงพลังนี้ รวมถึงการถ่ายภาพผลิตภัณฑ์และรูปแบบลายเส้น ที่ด้านบนของภาพนี้ พวกเขามี GIF แบบเคลื่อนไหวที่มีพื้นหลังโปร่งใส และข้อความสดในพื้นที่เนื้อหา

อีเมล Chipotle Friendsgiving พร้อมภาพพื้นหลังที่ละเอียดอ่อน — ที่มา: อีเมลที่ดีจริงๆ

GIF แบบเคลื่อนไหวยังสามารถใช้เป็นภาพพื้นหลังได้ เช่น ตัวอย่างนี้จาก Adobe Stock ซึ่งส่งเสริมคอลเลกชั่นเทศกาลด้วยเนื้อหาฮีโร่ ซึ่งรวมถึงข้อความสดและปุ่ม CTA ที่วางอยู่บนพื้นหลังแบบเคลื่อนไหว

อีเมล Adobe Stock พร้อมภาพพื้นหลัง GIF แบบเคลื่อนไหว — ที่มา: อีเมลที่ดีจริงๆ

ข้อควรพิจารณาในการออกแบบ

เมื่อคิดเกี่ยวกับการใช้ภาพพื้นหลัง มีข้อควรพิจารณาด้านการออกแบบบางประการที่ควรค่าแก่การพิจารณา

ตัดกัน

เพื่อให้แน่ใจว่าผู้อ่านทุกคนได้รับคุณค่าของเนื้อหาที่วางซ้อนบนภาพพื้นหลัง สิ่งสำคัญคือต้องคำนึงถึงความแตกต่าง ปฏิบัติกับรูปภาพในลักษณะเดียวกับที่คุณใช้เป็นสีเรียบ และทดสอบสีในภาพของคุณกับสีของเนื้อหาของคุณ

หากคุณออกแบบโดยใช้ Figma คุณสามารถเพิ่มปลั๊กอินเช่น Color Blind และ Contrast เพื่อดูว่าคุณปฏิบัติตามแนวทางการเข้าถึงเนื้อหาเว็บ (WCAG) หรือไม่ นอกจากนี้ยังมีเว็บแอปมากมาย เช่น Contrast Checker ของ WebAim ซึ่งคุณสามารถทดสอบสีในการออกแบบของคุณได้

ความเรียบง่าย

อีกวิธีหนึ่งเพื่อให้แน่ใจว่าสามารถอ่านได้คือทำให้ทุกอย่างเรียบง่าย พื้นหลังที่ไม่ว่างอาจทำให้ยากต่อการได้รับคุณค่าของข้อความสดที่คุณวางบนภาพของคุณ ดังนั้น การพิจารณาภาพพื้นหลังของคุณเป็นการเพิ่มประสิทธิภาพมากกว่าคุณลักษณะมักจะเป็นประโยชน์

ทางเลือกสีทึบ

เนื่องจากไม่ใช่ไคลเอนต์อีเมลทั้งหมดที่จะให้เกียรติภาพพื้นหลัง ให้ออกแบบตัวเลือกสำรองแบบสีทึบ สมาชิกที่ใช้โปรแกรมรับส่งเมลที่ไม่สนับสนุนภาพของคุณยังคงได้รับประสบการณ์ที่ยอดเยี่ยมในการใช้สีทึบ อย่าลืมเลือกสีทางเลือกที่เข้ากับการออกแบบของคุณและตัดกันได้ดีกับองค์ประกอบพื้นหน้า

วิธีโค้ดรูปภาพพื้นหลังในอีเมล

ก่อนที่ฉันจะพูดถึงโค้ดนี้ มาดูกันว่าไคลเอ็นต์ใดจะแสดงการจัดสไตล์ CSS พื้นหลัง และไคลเอ็นต์ใดต้องการความช่วยเหลือจาก VML fallback

ข่าวดี: การสนับสนุน CSS ในพื้นหลังแบบอินไลน์ได้รับการปรับปรุง โดยไคลเอ็นต์เว็บเมลสนับสนุนวิธีนี้อย่างสมบูรณ์ ซึ่งหมายความว่าไม่จำเป็นต้องใช้แอตทริบิวต์ HTML พื้นหลังอีกต่อไป

ข่าวร้าย: น่าเสียดายที่ Windows 10 Mail ไม่ชอบภาพพื้นหลัง จะไม่แสดง CSS แบบอินไลน์หรือแอตทริบิวต์พื้นหลัง HTML ที่เลิกใช้แล้ว และการใช้ VML จะทำให้เกิดปัญหาในการแสดงผลด้วยข้อความแสดงข้อผิดพลาด 'ไม่สามารถแสดงรูปภาพได้'

หากคุณกังวลเกี่ยวกับประสบการณ์ที่สมาชิก Windows 10 Mail จะได้รับ ให้พิจารณาละเว้น VML ซึ่งช่วยให้มั่นใจได้ว่าสีพื้นหลังทางเลือกจะทำให้ผู้ชม Microsoft Outlook Suite ของคุณได้รับประสบการณ์การอ่านอีเมลที่ยอดเยี่ยม โดยไม่ต้องตกแต่งเพิ่มเติม

ภาพพื้นหลังของอีเมลมีลักษณะอย่างไรใน Windows 10 Mail

รองรับไคลเอนต์อีเมลสำหรับภาพพื้นหลัง

ไคลเอนต์อีเมล	การใช้ CSS แบบอินไลน์	การใช้ VML
Apple Mail14	✓	✘
ออฟฟิศ 365 (Mac)	✓	✘
ออฟฟิศ 365 (วินโดวส์)	✘	✓
Outlook 2016 (macOS 10.12.6)	✓	✘
Outlook 2013, 2016, 2019 (Windows 10)	✘	✓
Windows 10 Mail	✘	✘
แอป Gmail (แอนดรอยด์ 10)	✓	✘
แอป Gmail (iOS 13.4.1)	✓	✘
Outlook (แอนดรอยด์ 7.0)	✓	✘
Outlook (iOS 12.0)	✓	✘
ซัมซุงเมล (Android 7.0)	✓	✘
iPad 11 Air (Gen 4 iOS 14.2)	✓	✘
ไอโฟน 12 (iOS 14.2)	✓	✘
AOL Mail (ขอบ)	✓	✘
Gmail (Chrome)	✓	✘
Office 365	✓	✘
Outlook.com	✓	✘
ยาฮู! จดหมาย	✓	✘

ไคลเอนต์อีเมลใดที่สมาชิกของคุณใช้

ดูส่วนแบ่งการตลาดไคลเอนต์อีเมลของคุณเองด้วย Litmus Email Analytics ดูว่าไคลเอนต์อีเมลใดที่คุณต้องการปรับรูปภาพพื้นหลังให้เหมาะสม (คำแนะนำ: หาก Windows 10 Mail เหลือน้อย ก็อย่าเพิ่งท้อ)

เรียนรู้เพิ่มเติม →

เมื่อเราจัดการเสร็จแล้ว มาคุยกันเรื่องโค้ดกัน!

สิ่งที่สนุกอย่างหนึ่งในการนำภาพพื้นหลังมาใส่ในอีเมลของคุณคือมีหลายวิธีที่คุณสามารถทำสิ่งนี้ได้ คุณสามารถกรอกส่วนเล็กๆ หรือปิดเนื้อหาในอีเมลของคุณ ใช้รูปภาพเดียวหรือรูปแบบซ้ำ และคุณสามารถเปลี่ยนภาพพื้นหลังได้ขึ้นอยู่กับว่าผู้อ่านของคุณอยู่บนเดสก์ท็อป อุปกรณ์เคลื่อนที่ โหมดแสง โหมดมืด หรือแม้กระทั่งเมื่อ พวกเขาวางเมาส์เหนือรูปภาพของคุณ

แต่ละเทคนิคต้องการแนวทางที่แตกต่างกัน ดังนั้น มาดูวิธีที่ดีที่สุดในการเขียนโค้ดเหล่านี้กัน

ภาพพื้นหลังที่กำหนดความกว้างหรือคงที่

พื้นหลังความกว้างคงที่

เมื่อใช้รูปภาพพื้นหลัง ควรเพิ่มโค้ดของคุณลงในเซลล์ของตารางที่มีอยู่เสมอ นำไปใช้กับองค์ประกอบ HTML อื่น ๆ เช่น <table> หรือ <body> ไม่น่าจะได้รับการสนับสนุนจากไคลเอนต์อีเมลบางตัว นี่คือสิ่งที่ควรมีลักษณะดังนี้:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

ที่นี่ รูปภาพถูกสร้างขึ้นเพื่อให้พอดีกับความกว้างและความสูงของเซลล์โดยรวม background-size:cover ในรูปแบบ CSS แบบอินไลน์แล้วจัดวางให้อยู่ตรงกลาง การเพิ่มสไตล์เหล่านี้ช่วยให้คุณใช้รูปภาพ 2x ได้ ซึ่งหมายความว่าคุณจะเห็นการเรนเดอร์ที่คมชัดบนจอแสดงผลเรตินา และจะถูกปรับขนาดให้พอดีกับคอนเทนเนอร์ของคุณ แม้ว่าคอนเทนเนอร์จะปรับขนาดสำหรับการแสดงผลบนอุปกรณ์ต่างๆ

อย่างไรก็ตาม นี่ยังหมายความว่าหากรูปภาพของคุณเล็กเกินไปหรือไม่ได้ขนาดตามสัดส่วนของคอนเทนเนอร์ รูปภาพนั้นอาจมีลักษณะเป็นพิกเซลหรือยืดออก โดยเฉพาะถ้าเป็นการถ่ายภาพ

ภาพพื้นหลังของคุณใช้งานได้หรือไม่?

ดูการทำงานของโค้ดสำหรับรูปภาพพื้นหลังในอีเมลของคุณเองในแอปอีเมลยอดนิยมต่างๆ เช่น Gmail และ Outlook

เรียนรู้เพิ่มเติม →

ในปัจจุบัน โปรแกรมรับส่งเมลส่วนใหญ่รองรับการจัดรูปแบบพื้นหลัง CSS แบบอินไลน์ คุณจึงเพิ่มรูปภาพพื้นหลังและสีทางเลือกได้โดยใช้คุณสมบัติ CSS ชวเลขพื้นหลัง พูดอีกอย่างก็คือ ใช้สิ่งเหล่านี้กับสไตล์ 'พื้นหลัง' น่าเสียดายที่การจัดรูปแบบพื้นหลังเพิ่มเติมนั้นใช้ไม่ได้ผลดีนักเมื่อเขียนโค้ดแบบอินไลน์ ดังนั้นการวางตำแหน่งหรือขนาดใดๆ จะต้องเขียนเป็นสไตล์ที่แยกจากกัน ตัวอย่างเช่น ใช้ background-position: center; ขนาดพื้นหลัง: 80%; แทนที่จะเป็น พื้นหลัง: กึ่งกลาง/80%; .

ทำให้สิ่งนี้ใช้งานได้ใน Outlook ด้วย VML fallback

Outlook และ Office 365 สำหรับเดสก์ท็อปต้องการความช่วยเหลือเล็กน้อยในการแสดงภาพพื้นหลัง เนื่องจากจะไม่แสดงสไตล์พื้นหลัง CSS เช่นกัน เพื่อให้ภาพพื้นหลังของเราแสดงในไคลเอนต์อีเมลเหล่านี้ เราต้องใช้เทคนิคที่ Stig Morten Myre เป็นที่นิยมสำหรับการตรวจสอบแคมเปญ และใช้ Vector Markup Language (VML) ของ Microsoft

นำโค้ดที่เราสร้างไว้แล้ววาง VML ที่จำเป็นและ <div> ที่มี <div> ไว้ในเซลล์ตารางของเรา:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
           <v:fill type="frame" src="fixed-background.jpg" />
           <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
           <![endif]-->
           <div>
<!--add your content here-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

    </td>
</tr>
</table>

สำหรับรูปภาพที่ต้องเติมคอนเทนเนอร์โดยไม่ทำซ้ำ เราจำเป็นต้องใช้ 'frame' ภายในแท็ก vml:fill ด้วยวิธีนี้ คุณสามารถใช้ภาพ 2x ภายในแท็กนี้ได้ ตรวจสอบให้แน่ใจว่าคุณตั้งค่าความกว้างของคอนเทนเนอร์โดยใช้การจัดรูปแบบอินไลน์บนแท็ก v:rect (ในตัวอย่างด้านบน ตั้งค่าเป็น 600px)

หากคุณต้องการ padding บนคอนเทนเนอร์ของคุณ สิ่งที่คุณอาจพบคือการวาง VML ภายในคอนเทนเนอร์จะทำให้ padding ยุบ วิธีที่เราแก้ไขคือห่อ VML ไว้รอบๆ คอนเทนเนอร์ ดังนั้นเราต้องซ้อนคอนเทนเนอร์ของเราไว้ในตารางอื่น ดังนี้:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
<v:fill type="frame" src="fixed-background.jpg" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--add your content here-->
    </td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>

ทำซ้ำภาพพื้นหลัง

คุณยังสามารถเพิ่มพื้นหลังที่ทำซ้ำภายในคอนเทนเนอร์ที่คุณวางไว้ ตัวอย่างที่ดีคือการทำซ้ำรูปแบบทั่วทั้งเนื้อหาของอีเมลของคุณ

ตัวอย่างการทำซ้ำภาพพื้นหลัง

หากรูปภาพที่เราวางในเซลล์คอนเทนเนอร์ของเรามีขนาดเล็กกว่าคอนเทนเนอร์ รูปภาพนั้นจะทำซ้ำโดยอัตโนมัติทั้งในแนวนอนและแนวตั้ง หากต้องการทำซ้ำในทิศทางเดียว ให้จัดรูปแบบด้วย CSS 'background-repeat' และเพิ่มค่า repeat-x เพื่อทำซ้ำในแนวนอนหรือทำซ้ำ-y เพื่อทำซ้ำในแนวตั้ง

ในการเติมคอนเทนเนอร์ทั้งหมดด้วยรูปแบบการทำซ้ำโดยสมบูรณ์ โค้ดนั้นง่ายมาก:

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
    <td style="background: url(repeat-background.png) #B5CFE3;">
        <!--add your content here-->
    </td>
</tr>
</table>

ทำให้สิ่งนี้ใช้งานได้ใน Outlook ด้วย VML fallback

อีกครั้ง ถ้าคุณต้องการดูการแสดงผลพื้นหลังของคุณในไคลเอ็นต์ Outlook คุณสามารถใช้ VML ได้ คราวนี้โค้ดจะต่างออกไปเล็กน้อย โดยวาง VML ไว้หน้าคอนเทนเนอร์:

<div>
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="repeat-background.png" color="#ffffff"/>
  </v:background>
  <![endif]-->
  <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%;">
     <tr>
        <td align="center" style="background-image: url(repeat-background.png);">
       </td> 
    </tr>
</table>
</div>

หากต้องการให้พื้นหลังซ้ำ ให้เติมแท็ก v:fill ด้วยประเภท 'tile' ไม่แปลกใจเลยที่มีปัญหาการแสดงผลบางอย่างกับ Windows 10 Mail และด้วยพื้นหลังที่ทำซ้ำ ปัญหาการแสดงผลอาจไม่น่าดูมากขึ้น ดังนั้น การละเว้น VML อาจเป็นแนวทางที่ปลอดภัยที่สุดหากคุณมีสมาชิก Windows 10 Mail

เทคนิคขั้นสูง

ภาพพื้นหลังคงที่และทำซ้ำมีโอกาสมากมายที่จะยกระดับการออกแบบอีเมลของคุณ แต่ยังมีอีกมาก:

สลับภาพความคมชัด

ขณะนี้ Dark Mode พร้อมใช้งานในไคลเอนต์อีเมลหลายตัวแล้ว และการปฏิบัติตามการตั้งค่าของสมาชิกที่ให้เกียรติจะช่วยให้คุณเข้าถึงผู้ชมที่กว้างขึ้นและสร้างความไว้วางใจได้ การเปลี่ยนภาพพื้นหลังของคุณเป็นวิธีที่ยอดเยี่ยมในการเสริมการออกแบบโหมดแสงหรือโหมดมืด และยังเป็นการเพิ่มประสิทธิภาพที่สนุกและเรียบง่ายอีกด้วย

โหมดความคมชัด

ในการดำเนินการนี้ คุณต้องเพิ่ม CSS แบบฝังลงในคิวรีสื่อของ Dark Mode วิธีนี้จะช่วยให้แน่ใจว่าภาพพื้นหลังของโหมดมืดของคุณแสดงอยู่ในโปรแกรมรับส่งเมลที่จะสนับสนุนการสืบค้นสื่อประเภทนี้:

.darkmode-switch {
            background-image:url(background-dark.png) !important;
            background-color:#111111 !important;
        }

ควรเพิ่มสีทางเลือกที่เข้มกว่า วิธีนี้จะช่วยกับไคลเอนต์อีเมลที่จะไม่โหลดรูปภาพโดยที่ผู้อ่านไม่ดำเนินการ และทำให้มั่นใจได้ว่าข้อความของคุณสามารถอ่านได้เมื่อรูปภาพของคุณยังไม่ได้โหลด

ตอนนี้ ใน HTML ของคุณ ให้นำชั้นเรียนของคุณไปใช้กับเซลล์ที่มีภาพพื้นหลังของโหมดแสงของคุณ เรียบง่าย!

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class= "darkmode-switch" style="background: url(background-light.png) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

จดบันทึก : สิ่งที่ยากต่อการออกแบบและยิ่งยากกว่าในการเขียนโค้ดสำหรับ ก็คือไคลเอนต์อีเมลที่จะเปลี่ยนสีของอีเมลของคุณในสภาพแวดล้อมของ Dark Mode โดยมองข้ามการทำงานหนักทั้งหมดที่คุณใส่ลงไปในการเขียนข้อความค้นหาสื่อของ Dark Mode

แทบเป็นไปไม่ได้เลยที่จะนำไคลเอนต์อีเมลเหล่านี้ไปใช้ อย่างไรก็ตาม คุณสามารถเล่นกับภาพพื้นหลังที่มีระดับความโปร่งใส และใช้สีพื้นหลังที่มีคอนทราสต์สูงกับคอนเทนเนอร์ของคุณ เช่น สีขาวสำหรับโหมดแสง และสีดำสำหรับโหมดมืด ซึ่งจะทำให้สีพื้นหลังกลับด้าน ฉันลองสิ่งนี้ด้วยตัวอย่างต่อไปนี้:

ภาพพื้นหลังของอีเมลในสถานการณ์ต่างๆ ในโหมดมืด

ภาพพื้นหลังบั้งของฉันมีความทึบ 30% บนลูกศรและโปร่งใสอย่างสมบูรณ์ระหว่างรูปภาพเหล่านี้ ซึ่งหมายความว่าเมื่อไคลเอนต์อีเมลที่ละเมิดเข้าควบคุมการเรนเดอร์โหมดมืดของฉัน เนื้อหานั้นสามารถอ่านได้

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการเข้ารหัสสำหรับโหมดมืดและการสนับสนุนไคลเอนต์อีเมล โปรดดูที่ Ultimate Guide to Dark Mode Email

พื้นหลังแบบโต้ตอบ

ลองสร้างความพึงพอใจให้สมาชิกด้วยการโต้ตอบบ้าง คุณสามารถกระจายความสุขเล็กๆ น้อยๆ ด้วยเอฟเฟกต์โฮเวอร์หรือโรลโอเวอร์ง่ายๆ โดยเปลี่ยนพื้นหลังของคอนเทนเนอร์ของคุณเมื่อผู้อ่านเลื่อนเคอร์เซอร์ไปเหนือเนื้อหาของคุณ

สลับรูปภาพพื้นหลังของอีเมลเมื่อวางเมาส์เหนือหรือวางเมาส์เหนือ

คุณต้องมี CSS ฝังตัวเล็กน้อยเพื่อให้สิ่งนี้ใช้งานได้ วางไว้ในแท็ก <style> ของคุณ:

.background-rollover:hover{ 
        background-image: url(background-rollover-b.png) !important; 
        background-color:#020203 !important;
}

ตอนนี้สิ่งที่คุณต้องทำคือนำคลาสนี้ไปใช้กับเซลล์ตารางของคุณ ดังนี้:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class="background-rollover" style="background: url(background-rollover-a.png) #DBE8F0; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

เพิ่มระดับการออกแบบของคุณ

ด้วยโอกาสมากมาย การใช้ภาพพื้นหลังเพื่อปรับปรุงการออกแบบอีเมลของคุณเป็นวิธีที่ยอดเยี่ยมในการผลักดันซองจดหมายและทำให้อีเมลของคุณโดดเด่นท่ามกลางฝูงชน เพื่อช่วยให้คุณนำเทคนิคเหล่านี้ไปปฏิบัติ เราได้สร้างแหล่งข้อมูลที่มีประโยชน์ซึ่งคุณสามารถคว้าโค้ดที่แสดงในโพสต์นี้

เราชอบที่จะดูว่าคุณใช้ภาพพื้นหลังในอีเมลของคุณอย่างไร - แบ่งปันตัวอย่างของคุณในความคิดเห็นด้านล่าง

ตรวจสอบให้แน่ใจว่าภาพพื้นหลังของคุณใช้งานได้—ด้วย Litmus

มันทำงาน? ดูตัวอย่างภาพพื้นหลังของคุณ (และส่วนที่เหลือของอีเมล) ในโปรแกรมรับส่งเมล แอพ และอุปกรณ์กว่า 100 รายการด้วย Litmus และทักทายกับอีเมลที่เกี่ยวกับแบรนด์และปราศจากข้อผิดพลาด

เริ่มการทดลองใช้ฟรี →

เผยแพร่ครั้งแรกเมื่อวันที่ 24 พฤษภาคม 2019 โดย Jason Rodriguez ปรับปรุงล่าสุด 21 กรกฎาคม 2021