CSS btn - 不会出现背景图片

我的问题似乎很简单。我想创建一个png的按钮，并通过.png悬停。我需要这个电子邮件活动，因为Outlook不理解一些CSS属性。我试过让它简单CSS btn - 不会出现背景图片

.button { 
    border: none; 
    background: url(/image1.png); 
} 
    .button:hover { 
    border: none; 
    background: url(/image2.png); 
}

而且一切都只是白色。任何帮助将是巨大的:)

来源

2017-05-25 user8065844

https://stackoverflow.com/questions/2444894/how-to-set-background-image-in-submit-button – tech2017

如果你正在为Outlook做它，你需要内联样式 –

欢迎使用[Stack溢出（http://stackoverflow.com）！因为许多电子邮件客户端（例如Gmail，Outlook）使用html 3（ish），所以电子邮件的HTML是痛苦的。要专门为Outlook开发，您可以在Word中查看电子邮件，因为它们使用相同的呈现引擎。正如@CalvT所说的，你需要做所有的事情来作为内联样式。 – AWinkle

according to documentation，你应该那样做，

background: url("/image1.png");

.button { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: none; 
 
    background: url("https://i.stack.imgur.com/teLso.jpg?s=48&g=1"); 
 
} 
 
.button:hover { 
 
    border: none; 
 
    background: url("https://graph.facebook.com/160520007817300/picture?type=large"); 
 
}

<button class="button"></button>

来源

2017-05-25 15:06:43 marmeladze

谢谢！一切都很好 – user8065844

你有错误，使用简单或双引号 “” - ''，举例：

button{ 
 
    background: url('https://s-media-cache-ak0.pinimg.com/736x/24/fe/e1/24fee13b4dc475c435984ab0aa1b8ecb.jpg'); 
 
    background-size: 500px 100px; 
 
    background-position: center; 
 
    width: 500px; 
 
    height: 40px; 
 
}

<button> Example button </button>

与任何其他html元素相同。

来源

2017-05-25 15:42:27

CSS btn - 不会出现背景图片

回答

相关问题