html - 图像未从 CSS 继承

Question

我正在尝试设置一个 anchor 标记以从页面底部滚动到页面顶部，并且该功能工作正常 - 但我想要显示的箭头图标没有从链接的 CSS 中显示出来。

HTML

<a href="#" class="anchorScroll" style=""></a>

CSS

/*Anchor to move to top*/

.anchorScroll {
    content:url(https://visualpharm.com/assets/98/Upward%20Arrow-595b40b85ba036ed117dbd06.svg/200x200);
    background: #8994a5;
    color: #fff;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 9999;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    border-radius: 3px;
}

这是一个 JS Fiddle link.提前感谢任何人可以提供的任何帮助。

Answer 1

你已经改变了这个:

content:url(https://visualpharm.com/assets/98/Upward%20Arrow-595b40b85ba036ed117dbd06.svg/200x200);

为此:

background:url('https://visualpharm.com/assets/98/Upward%20Arrow-595b40b85ba036ed117dbd06.svg');

将“内容”更改为“背景”，放置引文链接，并删除 200x200。

完整代码在这里:

.anchorScroll {
        background:#8994a5 url('https://visualpharm.com/assets/98/Upward%20Arrow-595b40b85ba036ed117dbd06.svg');
        color: #fff;
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 9999;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 20px;
        border-radius: 3px;
    }