Tìm hiểu cách tốt nhất để viết mã màu nền và độ dốc của email HTML với các mẹo bạn cần để làm cho chúng hoạt động cho Outlook, Gmail, Chế độ tối và hơn thế nữa.

Bạn đang xem : html background solid color

Viết mã màu nền nghe có vẻ như là một nhiệm vụ đơn giản phải không? Sự thật? Ngay cả một chút kiểu dáng nhỏ này cũng có một số cạm bẫy và cần phải cân nhắc một số vấn đề để có được kết xuất nhất quán giữa các ứng dụng email.

Và không chỉ các nhà phát triển mới cần xoa dịu các vị thần hộp thư đến. Với đà tăng trưởng của Chế độ tối, thậm chí còn có nhiều môi trường hơn cần lưu ý, một số môi trường sẽ yêu cầu các nhà thiết kế email phải cẩn thận hơn khi áp dụng màu nền trong thiết kế của họ.

Trong bài đăng trên blog này, bạn sẽ learn:

Tại sao lại sử dụng màu nền trong email?

Việc đưa chiến lược màu nền vào đúng vị trí sẽ đáp ứng một số nhu cầu khi nâng cao chương trình email của bạn. Từ quan điểm kỹ thuật, việc triển khai màu nền không thêm bất kỳ thời gian tải nào vào email của bạn và chúng vẫn hiển thị ngay cả khi hình ảnh bị tắt. Chúng có thể giúp tách nội dung, gọi ra tin nhắn hoặc tạo một email khác biệt với những email khác trong hộp thư đến của người đăng ký, có khả năng tăng mức độ tương tác giữa khán giả của bạn.

Nổi bật trong hộp thư đến

Bạn có thể tạo trải nghiệm mở đầu có tác động — chẳng hạn như email này từ Blurb .

Khu vực anh hùng là một điểm nhấn. Nền màu cam đậm tạo nên tác động bằng cách tương phản với màu xanh lam của logo, nâng tầm nhận diện thương hiệu. Sau khi người đọc cuộn qua khu vực anh hùng, nội dung phụ nằm trên nền trắng, mang đến trải nghiệm đọc lý tưởng cho các nội dung bản sao lớn hơn.

ví dụ email blurb về background color

Tách các phần ra

Nếu bạn có một email dài, màu sắc là một cách tuyệt vời để phân tách các khối nội dung khác nhau một cách trực quan để cảm giác dễ tiêu hóa hơn.

Email quảng cáo từ gã khổng lồ cà phê Starbucks có thể khá dài, với nhiều chương trình khuyến mãi được đặt trong một email. Để giúp các phần khác biệt với nhau, các màu nền khác nhau được sử dụng.

email starbucks ví dụ về màu nền

Nâng cao nhận diện thương hiệu

Học sinh là một phần của bộ nhận diện thương hiệu của Đại lý tiếp thị 1973 Ltd , đó là lý do tại sao bạn thường tìm thấy các gradient tuyến tính đậm trong nền email của họ. Gradient nền có thể làm cho các tác phẩm trông năng động hơn và thậm chí khuyến khích người đăng ký cuộn.

Xem Thêm  JavaScript Split - Cách tách một chuỗi thành một mảng trong JS - javascript tách thành mảng

1973 Ltd email ví dụ về gradient background

Vậy cách tốt nhất để đưa những kỹ thuật này vào phát triển email? Tôi đã yêu cầu đồng đội và nhà phát triển email Litmus của mình, Carin Slater , cung cấp cho chúng tôi thông tin chi tiết về mã hóa nền rắn và nền dốc.

Cách viết mã màu nền email HTML đồng nhất

Màu nền có thể được mã hóa theo nhiều cách và ở nhiều nơi. Nhưng mỗi phương pháp không được hỗ trợ như nhau giữa các ứng dụng email. Dưới đây là biểu đồ nhanh về mã kiểu nền và phương pháp mã màu nào phù hợp với các ứng dụng email hàng đầu.

Hỗ trợ ứng dụng email cho màu nền

Mã kiểu thuộc tínhCSS
‘background’ và ‘background-color’HTML thuộc tính’ bgcolor ‘ Mã màu 6 chữ số hex3 chữ số hexRGBRGBA6 chữ số hex3 chữ số hexRGBRGBAApple Mail 14:0 Có ✓ Có:0 Yes:0 Yes:0 Yes✘ No✘ NoOutlook 2016 (macOS 10.12.6) ✓ Yes:0 Yes:0 Yes:0 Yes:0 Yes:0 Yes ✘ No✘ NoOutlook 13, 16, 19 (Windows 10) ✓ Yes:0 Yes:0 Yes✘ No:0 Yes✘ No✘ No✘ NoOutlook Office 365 (Windows 10) ✓ Yes:0 Yes:0 Yes✘ No:0 Yes✘ No✘ No✘ NoOutlook Office 365 (Mac OS 10.15) ✓ Có ✓ Có ✓ Có ✓ Có ✓ Yes ✓ Yes✘ No✘ NoWindows 10 Mail:0 Yes:0 Yes ✓ Yes✘ No:0 Yes✘ No✘ No✘ NoGmail App (Android 10) ✓ Yes:0 Yes ✓ Yes:0 Yes:0 Yes:0 Yes✘ No✘ NoGmail App (iOS 13.4.1) ✓ Yes:0 Yes:0 Yes:0 Yes:0 Yes ✓ Yes✘ No✘ NoOutlook (Android 7.0) ✓ Yes:0 Yes:0 Yes:0 Yes:0 Yes ✓ Yes✘ No✘ NoOutlook (iOS 12.0) ✓ Yes ✓ Yes:0 Yes:0 Yes ✓ Yes✘ No✘ NoSamsung Mail (Android 7.0) ✓ Yes:0 Yes:0 Yes:0 Yes:0 Yes✘ No✘ NoiPad 11 Air ( Gen 4 iOS 14.2) ✓ Yes:0 Yes:0 Yes:0 Yes:0 Yes:0 Yes ✓ No✘ NoiPhone 12 (iOS 14.2) ✓ Yes:0 Yes:0 Yes:0 Yes:0 Yes✘ No✘ NoAOL Mail (Edge) ✓ Yes:0 Yes ✓ Có✘ Không ✓ Có✘ Không✘ Không✘ KhôngComcast (Cạnh) ✓ Có ✓ Có ✓ Có ✓ Có ✓ Có✘ Không✘ KhôngGmail (Chrome) ✓ Có ✓ Có ✓ Có ✓ Có ✓ Có ✓ Có✘ Không✘ Không Văn phòng 365:0 Có ✓ Có ✓ Có ✓ Có ✓ Yes✘ No✘ NoOutlook.com:0 Yes ✓ Yes ✓ Yes:0 Yes:0 Yes✘ No✘ NoWeb.de:0 Yes:0 Yes:0 Có✘ Không: Có✘ Không✘ Không✘ KhôngYahoo! Thư ✓ Có ✓ Có ✓ Có✘ Không ✓ Có✘ Không✘ Không✘ Không

Tất cả chúng ta đều biết ứng dụng email có thể hơi khó tính. Vậy cách tốt nhất để viết mã màu nền để nó hoạt động trên tất cả các ứng dụng email là gì? Tôi sẽ hướng dẫn bạn về đề xuất của chúng tôi và lý do.

1. Sử dụng bảng và ô bảng

Có bốn vị trí trong HTML của bạn mà bạn có thể thêm màu nền:

  • & lt; body & gt;
  • & lt; div & gt;
  • & lt; table & gt;
  • & lt; td & gt;

Nơi an toàn nhất để thêm màu nền là trên bảng hoặc bảng ô.

Xem Thêm  Cách cài đặt và sử dụng phông chữ web - cách cài đặt phông chữ trên trang web

& lt; body & gt; thẻ bị xóa trong Yahoo và AOL, vì vậy bất kỳ màu nền nào được áp dụng ở đó sẽ không hiển thị trong các ứng dụng email đó. Và đặt màu trên bao bì & lt; div & gt; sau khi phần thân sẽ hoạt động ở mọi nơi ngoại trừ ứng dụng khách Outlook vì chúng không hỗ trợ & lt; div & gt; các thẻ trong email.

Để nhận được nhiều hỗ trợ nhất cho ứng dụng email, hãy gói toàn bộ email của bạn trong một bảng & lt; 100% chiều rộng & gt; gắn thẻ và đặt màu nền của bạn ở đó. Và sử dụng các ô trong bảng & lt; td & gt; cho các phần của email để bạn linh hoạt hơn trong việc tô màu các khối nội dung cụ thể.

2. Thêm màu bằng thuộc tính CSS và mã màu HEX hoặc giá trị RGB

Màu nền có thể được mã hóa theo nhiều cách:

  • Sử dụng thuộc tính bgcolor HTML
  • Sử dụng màu nền thuộc tính CSS
  • Sử dụng nền thuộc tính viết tắt CSS
  • Sử dụng mã màu thập lục phân gồm 6 chữ số
  • Sử dụng mã màu thập lục phân 3 chữ số < / li>
  • Sử dụng các giá trị màu RGB

Về cách đặt màu nền trên bảng hoặc ô trong bảng, bạn nên sử dụng thuộc tính CSS.

Kiểm tra hai phương pháp thuộc tính CSS — background-color và background — chúng tôi nhận thấy cả hai đều có kết quả giống nhau, nhất quán miễn là bạn chỉ thêm màu (không có hình ảnh). Theo caniemail.com , việc sử dụng thuộc tính nền cho bất kỳ thứ gì khác ngoài việc thêm màu có thể khiến màu của bạn không hiển thị.

Thuộc tính HTML bgcolor không hoạt động tốt trong Outlook, với sự hỗ trợ không nhất quán cho mã HEX 3 chữ số. Và việc sử dụng các giá trị RGB và RGBA dẫn đến màu sắc không chính xác hoặc màu bị giảm hoàn toàn.

Đây là bài kiểm tra màu nền của chúng tôi bằng các phương pháp khác nhau trong Outlook để bạn có thể tự mình kiểm tra:

Kiểm tra Litmus về cách hiển thị màu nền trong email HTML trong Outlook

Trong các ứng dụng email khác, mã HEX 3 chữ số hiển thị tốt, nhưng các giá trị RGB và RGBA dẫn đến màu sắc không chính xác khi được áp dụng cho thuộc tính HTML bgcolor.

Kiểm tra Litmus về cách màu nền hiển thị trong email HTML trong Apple Mail

Sau tất cả thử nghiệm, chúng tôi đã đi đến một kết luận: Hãy gắn bó với các thuộc tính CSS và sử dụng các mã HEX 3 hoặc 6 chữ số hoặc các giá trị RGB. Các tính năng này hoạt động trên tất cả các ứng dụng email.

Giới thiệu độ mờ với alpha cho giá trị RGBA không được hỗ trợ trong Outlook, Web.de hoặc GMX.de, nhưng có hỗ trợ tốt.

< p> Vì vậy, mã cuối cùng của bạn sẽ trông giống như thế này để tô màu cho toàn bộ nền của bảng:


Xem thêm những thông tin liên quan đến chủ đề html nền rắn màu

Gradient Background in HTML

alt

  • Tác giả: khevin limosinero
  • Ngày đăng: 2020-10-31
  • Đánh giá: 4 ⭐ ( 7611 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: This channel is focused on video tutorials about Java, HTML, MS office and other computer-related topics. Feel free to share and give feedback.

    CSS gradients let you display smooth transitions between two or more specified colors.

    CSS defines two types of gradients:

    Linear Gradients (goes down/up/left/right/diagonally)

    Radial Gradients (defined by their center)
    Parameters
    *closest-side
    *farthest-side
    *closest-corner
    *farthest-corner

    Syntax:

    Linear
    background-image: linear-gradient(direction, color-stop1, color-stop2, …);
    Radial
    background-image: radial-gradient(shape size at position, start-color, …, last-color);

Làm cách nào để làm tối nền bằng CSS?

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 7369 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Chỉ cần thêm mã này vào css hình ảnh của bạn body{ background: /* top, transparent…

250,000+ Mẫu Nền Rắn Màu

  • Tác giả: vn.pikbest.com
  • Đánh giá: 3 ⭐ ( 5770 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn đang tìm kiếm Nền Rắn Màu mẫu tập tin? Pikbest đã tìm thấy 259566 mẫu hình ảnh thiết kế cho mục đích thương mại cá nhân. Hơn Nền Rắn Màu Mẫu áp phích,tờ rơi,thẻ và sách giới thiệu Tải xuống miễn phí để thiết kế,vui lòng truy cập PIKBEST.COM

Bộ hình nền loài rắn đẹp độc lạ và ấn tượng nhất thế giới

  • Tác giả: wall.vn
  • Đánh giá: 3 ⭐ ( 9978 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hình nền rắn đẹp nhất thế giới được tuyển chọn để bạn tải về làm hình nền tuyệt đẹp. Những hình ảnh loài rắn cực độc đáng sợ mà chắc bạn không thể bỏ qua

Cách để Thiết lập màu nền trong HTML

  • Tác giả: www.wikihow.vn
  • Đánh giá: 5 ⭐ ( 8152 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách để Thiết lập màu nền trong HTML

Thiết lập background trong HTML

  • Tác giả: vietjack.com
  • Đánh giá: 4 ⭐ ( 2047 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết lập background trong HTML – Học HTML cơ bản và nâng cao theo các bước đơn giản và dễ hiểu từ HTML là gì, Tag trong HTML, HTML tag, thẻ trong HTML, tổng hợp các thẻ HTML cơ bản, thẻ meta, thuộc tính, định dạng, thẻ trong HTML, commemnt, font, marquee, hình ảnh, link, bảng, frame, danh sách, layout, màu, form, background, style sheet, và sử dụng javascript.

Màu Chữ Và Màu Nền Trong Css

  • Tác giả: jdomain.vn
  • Đánh giá: 3 ⭐ ( 9600 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này chúng ta sẽ tìm hiểu một thuộc tính khá quan trọng và được sử dụng khá phổ biến trong website đó là màu chữ và màu nền, Vậy chúng ta phải làm thế nào để kiểm soát và sử dụng nó cho phù hợp? Bài này sẽ giúp bạn trả lời câu hỏi đó

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Still Walking: A Death in the Family - still walking

By ads_php