在 Microsoft Outlook 中的图像顶部有横幅

Question

当我通过电子邮件发送图像时，我想在我的图像顶部（重叠在图像顶部）有一个横幅。是这样的：

这是我的 haml 代码：

    %table.inline-block{align:'left'}
      %tbody
        %tr
          %td.w30{width: '15'}
          %td#wrap
            - if cat.present?
                .banner Updated Price
                = image_tag("#{cat.photos}")

这些是相关的 css 文件：

#wrap {
  position:relative;
  width: 195px;
  height: 165px;
  }

.banner {
  position: absolute;
  width: 100%;
  height: 30px;
  line-height: 30px;
  background: #05c3de;
  color:white
  }

问题是 Microsoft Outlook 不理解 Css 位置：'Absolute' 或位置：'Relative'，因此它将横幅置于图像之上（不重叠）

所以我更改了 haml 代码如下：

    %table.inline-block{align:'left'}
      %tbody
        %tr
          %td.w30{width: '15'}
          %td#wrap
            - if cat.present?
              <!--[if mso]>
              <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
              <v:fill type="tile" src="#{property.photos.first.thumbnail}"/>
              </v:background>
              <![endif]-->
              <!--[if !mso]>
              .banner Updated Price
              = image_tag("#{cat.photos}")
              <![endif]-->

我还是遇到了同样的问题，图片在Outlook中是这样显示的：

关于如何修复它有什么想法吗？感谢任何帮助或任何想法。谢谢，金星

Answer 1

好的，在花了很多时间在电子邮件模板上之后，我意识到我应该使用 tables。（绝对位置和相对位置不会在 gmail 和 outlook 模板中呈现，因此我不能将图像重叠在一起）。

        - if cat.present?
           <!--[if !mso]><!-- -->
              %table{style: "background-image: url('#{cat.photos.first.thumbnail}'); width: 195px; height: 165px;"}
                  %tbody
                    %tr
                      %td.banner
                        Updated price  
           <!--<![endif]-->

                :plain
                  <!--[if mso]>
                  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="position:relative;width:195px;height:165px;z-index:1" fillcolor="#E8E8E8">
                  <v:fill type="frame" src="#{property.photos.first.thumbnail}"/>
                  <v:textbox inset="0,0,0,0">
                  </v:textbox>
                  </v:rect>
                  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="v-text-anchor:middle;width:195px;position:relative;width:195px;height:30px;z-index:2;v-text-anchor:middle;" fillcolor="#05c3de">Zero
                  <v:textbox inset="50px, 5px, 50px, 5px">
                  <span style="color:#ffffff;font-family:sans-serif;font-size:13px;margin-left: 50px;">Updated price</span>
                  </v:textbox>
                  </v:rect>
                  <![endif]-->

在这种方法中，我使用图像作为 table 背景，并使用横幅作为 table 行来覆盖背景。我真的不喜欢这种方法，因为图像不应该只是 css 背景（应该是 html 图像标签），我想设置一个 'alt' 属性对于那张图片。

不幸的是，我尝试了很多其他方法，但无法想出任何其他解决方案。 :) 如果您有任何其他想法，请告诉我。

干杯，

在 Microsoft Outlook 中的图像顶部有横幅

Having a banner on top of an image in Microsoft Outlook

css

ruby-on-rails

image

outlook

haml