Html 在IOS设备中单击后，按钮图标消失

我已经为文本创建了一个带有span的按钮，并为span添加了背景图像。在Ios设备中，当我点击按钮时，背景图像消失

.button {
    width: 210px;
    height: 34px;
    border-radius: 20px;
    background-color: #B5D676;
    border: 1px solid #587F54;
    color: #325c46;
    outline: none;
    cursor: pointer;
}

.button span {
    font-size: 1em;
    font-family: ptsans-bold, sans-serif;
    padding-left: 40px;
    display: inline-block;
    height: 25px;
    background-position: left center;
    background-repeat: no-repeat;
}

.button span.link {
    background-image: url(../images/icon-link.png);
}

<button type="submit" value="Continue" class="button">
   <span class="link">
      @SharedLocalizer["ContinueText"]
   </span>
</button>

。按钮{
宽度：210px；
高度：34px；
边界半径：20px；
背景色：#B5D676；
边框：1px实心#587F54；
颜色：#325c46；
大纲：无；
光标：指针；
}
.按钮跨度{
字号：1em；
字体系列：ptsans粗体，sans衬线；
左侧填充：40px；
显示：内联块；
高度：25px；
背景位置：左中；
背景重复：无重复；
}
.按钮span.link{
背景图像：url（../images/icon link.png）；
}
@SharedLocalizer[“ContinueText”]

---

为什么会发生这种情况？

我创建了一个代码笔，但它仍然可以工作

我补充说

背景尺寸：100%

查看所有图像

---

查看代码笔

以便了解图像显示，然后仅当单击时图像才会消失？我以前在IOS背景图像方面遇到问题，我发现

背景附件：初始；背景尺寸：封面

帮助克服了这个问题，所以可以在

.button span.link

上尝试一下，看看它是否会保留下来，但在覆盖背景图像的按钮上，它可能是类似css的

：active

。@Ylama是的，单击图像时，图像仅在ios设备中消失。@Ylama在设置背景大小时，我的按钮设计会改变。图像覆盖文本。请尝试背景大小：自动然后可能只是玩一下，检查IOS设备上的浏览器

HTML

，看看

css

应该会告诉你为什么它不显示或被覆盖。背景大小100%会改变我的按钮设计。@Sonali我删除了

背景大小：100%

，但它仍然有效。你能创作小提琴或密码笔吗？