zoukankan      html  css  js  c++  java
  • outlook 2007 背景 zindex

    http://www.campaignmonitor.com/forums/viewtopic.php?id=3862

    Background images for Outlook 2007 and Outlook 2010 beta

    According to statistics about 45% of people use Microsoft Outlook as email client. About 10% of people use Outlook 2007. So it is a big deal for marketing departments to create and implement attractive HTML emails using Outlook 2007 email client. And it was pretty easy to do using any version of Microsoft email client released earlier Outlook 2007.

    Why?

    The problem is that both Outlook 2007 and 2010 beta do not support background images for any element except body. So which difference between these two versions leads to this issue? Outlook 2003 uses Internet Explorer to render HTML emails. Unfortunately Outlook 2007 uses Microsoft Office for this purpose.

    So Outlook 2007 does not support background images same as older Outlook versions do. But everybody who works with Microsoft word faces the situation when he/she needs to insert an image behind the text.  Outlook also has the same possibility, but with some restrictions.

    At first we should say that Microsoft word uses VML (Vector Markup Language) to produce vector graphics. This language allows including different figures, shapes and images in Microsoft Word. The most important thing for us is that VML supports image absolute positioning and z-indexes.

    Here is the simplest code to insert a background image into an HTML email for MS Outlook:

    <!–[if gte vml 1]>
    <v:shape
    stroked=’f’
    style= ‘position:absolute;
    z-index:-1;
    visibility:visible;
    583px; height:220px;
    top:0;
    left:10px;border:0;’>
    <v:imagedata src=”http://domain.com/image.png”/>
    </v:shape>
    <![endif]–>

    In order to insert a “background” image into Outlook email you should at least add a “shape” element and an inner “imagedata” element.
    Shape – this is a top level element used to describe a shape. It has a lot of attributes but we need only 2 of them:

    • Stroked (t/f) – defines if image has border
    • Style – defines the style of the shape (width, height, position and etc)

    For more information visit next link Vector Markup Language (VML).
    Imagedata – this is an element which defines an image for the Shape.

    So in order to make an image behave like background image for Microsoft Outlook, just perform the following steps:

    1. Add the following namespace into your email HTML tag in order to support VML tags:

    xmlns:v=”urn:schemas-microsoft-com:vml”

    2. Add the following style block as per some Microsoft documentation :

    <style type=”text/css”>
    v\:* { behavior: url(#default#VML); display:inline-block}
    </style>

    3. Create a container for the image (table or div). If you want other email clients (yahoo, aol or other)to support this email , set background image according to HTML standard.

    4. Place <!–[if gte vml 1]> <![endif]–> comment block within the container. This code guarantees that only Microsoft Outlook will render the image. You should use this comment to avoid duplicated images rendering in Internet Explorer as it also supports VML.

    5. Add shape and imagedata elements within the comment block and configure the image according to your needs (width, height). Set image position to absolute, set image left and right shift. And also don’t forget to set z-index to -1.

    This value guarantees that the text will be on the image.

    Your email will look in the following way:

    Download full source code of the email.

    Solution restrictions

    This solution is good because it is a single one! But of course it has some restrictions:
    1.  Some bulk mailing services remove comments code during email sending.
    2. You shouldn’t use background color. If you use the background color, it will overlap the background image and you will get the following result:

    3. You will not see background images in Outlook 2007 if you perform the following steps:

    a. Create an HTML email which supports both web and Outlook email clients.
    b. Send this email to a web email client.
    c. Open your email and forward it to a person who uses Outlook 2007.

    As a result there are no background images.

    4. A user will see background images as simple inline images if you forward your email from Outlook client to Web client.
    5. You have to use the whole image for background in any case. This means that if you have a simple gradient, you cannot cut a one pixel stripe and repeat it. You have to cut the whole image.

    Good luck and never have problems with Outlook emails in future!

  • 相关阅读:
    A Deep Dive Into Draggable and DragTarget in Flutter
    使用joda-time工具类 计算时间相差多少 天,小时,分钟,秒
    XmlDocument.load 读文件报异常:文件正被其它线程使用,解决方法
    拼多多是怎么骗你的?
    东北话中的满语
    唐郑国公魏征金口“斩龙台”梦斩泾河黄龙的传说
    Asp.Net Form表单控件的回车默认事件
    UpdatePanel 控件,客户端事件生命周期踩坑
    Javascript 严格模式(strict mode)详解
    代数、几何、分析 各自的范畴
  • 原文地址:https://www.cnblogs.com/icedog/p/1913959.html
Copyright © 2011-2022 走看看