Question

有关于如何在电子邮件签名中附加图形的古老问题。 I.E.我可以将图像作为链接附加，这意味着Outlook用户将看不到它。我可以将它们嵌入为编码图像，但只有从outlook（我们同时使用gmail和outlook）等发送时才有效。所以我有一个想法，如果我只是使用CSS图标，那可能会让我有点头疼。

这是我的问题，我怎么会这样做。在wepage上，它很简单，只需将其添加到样式表或样式标记之间，如下所示

<style>
.marker{
margin-top: 1.0em;
margin-left: 1.0em;
position: relative;
    width: 1.5em;
    height: 0.5em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-bottom-right-radius: 0.3em;
    border-top-right-radius: 0.3em;
font-size: 12px;

}

.marker:after{
 position: absolute;
content: "";
top: 0.3em;
left: 0em;
width: 0em;
height: 0em;
border-top: 0.9em solid rgba(44, 44, 44, 0);
border-bottom: 0.9em solid transparent;
border-left: 1.4em solid #2C2C2C;
-webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);  
}

.marker:before{
 border: 0.5em solid #2C2C2C;
    content: "";
    position: absolute;
    top: -0.8em;
    left: -1.28em;
    display: block;
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
}
</style>

但是，我似乎无法在电子邮件签名中使用该解决方案。想想也许我真的可以把它嵌入div风格的论证中，但不确定我是否可以将高级风格置于div风格中。

我所说的是下面的内容

<div style=".marker{
margin-top: 1.0em;
margin-left: 1.0em;
position: relative;
    width: 1.5em;
    height: 0.5em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-bottom-right-radius: 0.3em;
    border-top-right-radius: 0.3em;
font-size: 12px;

}

.marker:after{
 position: absolute;
content: "";
top: 0.3em;
left: 0em;
width: 0em;
height: 0em;
border-top: 0.9em solid rgba(44, 44, 44, 0);
border-bottom: 0.9em solid transparent;
border-left: 1.4em solid #2C2C2C;
-webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);  
}

.marker:before{
 border: 0.5em solid #2C2C2C;
    content: "";
    position: absolute;
    top: -0.8em;
    left: -1.28em;
    display: block;
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
}"></style>

Answer 1

嗯，你本可以试过的。但不，那不行。您在style属性中添加的样式应该只是该元素的样式，没有文档的完整样式表，甚至只是子元素。

但大多数邮件客户端都会忽略style个标签。此外，他们可能会忽略或明确删除一些内联样式，因此我确保在各种客户端上彻底测试它，或者可能立即决定使用它，只使用几个图像或一个精灵图像。

在电子邮件签名中使用高级ccs图标

1 个答案: