Question

我有一个非常简单的Chrome扩展程序来补充网页。其中一项功能是添加链接以在互联网上观看相关比赛。相关的HTML在这里：

<div class="option-wrap">
    <a class="option" href="http://www.google.com" target=_blank>
        <div class="option-icon tv-icon"></div>
        TV Link
    </a>
</div>

我的CSS在这里：

.tv-icon {
    margin-right: 2px;
    float: left;
    width: 10px;
    height: 10px;
    background-image: url("http://sayeedanwar.co.uk/wp-content/uploads/2014/01/tv-servizi.png") no-repeat;
    display: inline-block;
}

您会看到HTML中出现的几个类不在我的CSS中;它们来自网页，因为它存在。此代码的目标是让URL指定的电视图标显示在文本右侧的内容中，并且＃34; TV Link＆＃34;。当我运行代码时，似乎为图标分配了空间，并且光标能够单击此空间，但没有可见的图标。我的CSS＆lt;是否有问题？或者这是我现有的网页代码的功能，我必须找到解决方法？

这里有一个带有上述代码的JSFiddle。

Answer 1

.tv-icon {
    margin-right: 2px;
    float: left;
    width: 20px;
    height: 20px;
    background-image: url("http://sayeedanwar.co.uk/wp-content/uploads/2014/01/tv-servizi.png");
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;
}

JSFiddle

我所做的改变：

删除＆＃39;不重复＆＃39;在＆＃39; background-image＆＃39;
添加＆＃39; background-size＆＃39;和＆＃39; background-repeat＆＃39;

我也改变了尺寸。如果你愿意，可以改回来。

Answer 2

将css的最后两行切换为此

background-image: url("http://sayeedanwar.co.uk/wp-content/uploads/2014/01/tv-servizi.png");
background-size: cover;

@Richard Rodriguez - 如果你有no-repeat，你不应该background-size: cover。由于封面将包含所述区域并将重复的机会减少为零。

无法在CSS中显示内嵌图标

2 个答案: