Question

在space-container div中，我将图像设置为显示在选项的右侧，该图像是一个行分隔符图标。但是，当我设置此图标时，它只是一个很大的黑色标记。我已经尝试过调整大小，但还没有解决。我在其他两个div中使用的图标正在运行，它们显示一个下拉图标。

此外，我希望将图标存储在本地，但是当我设置图标时，当我设置背景以在本地查找图像时它们不会通过。我的文件结构如下：

CSS
-> CssImages
->-down-chevron.png
->-line-spacing.png
main.css

，并且我以这种格式将它们导入到CSS文件中。

background: transparent url("CSS/CssImages/down-cheron.png")

不幸的是，这似乎不起作用，但是，在开发人员工具中检查图像后，这些图像被拉到了本地主机上。

我的HTML在这里：

 <div class="tool-bar">
    <div class="options-container">
        <select>
            <option value = "times-new-roman">Times New Roman</option>
            <option value = "arial">Arial</option>
            <option value = "courier-new">Courier New</option>
            <option value = "verdana">Verdana</option>
        </select>
    </div>
    <div class="options-container font-container">
        <select>
            <option value = "8">8</option>
            <option value = "10">10</option>
            <option value = "12">12</option>
            <option value = "14">14</option>
            <option value="16">16</option>
            <option value="18">18</option>
            <option value="20">20</option>
            <option value="22">22</option>
            <option value="24">24</option>
        </select>
    </div>
    <div class="options-container spacing-container">
        <select>
            <option value="1">1</option>
            <option value="1.5">1.5</option>
            <option value="2.0">2.0</option>
        </select>
    </div>
</div>

我的CSS片段在这里：

.tool-bar {
    width: 100%;
    height: 100%;
    background-color: #a19f9f;
    float: left;
    display: inline;
}

.options-container {
    padding: 10px;
    width: 20%;
    border-left: 3px solid #aaaaaa;
    background-color: #ffffff;
    float:left; display:inline;
}

.font-container {
    width: 5%;
}

.spacing-container{
    width: 6%;
}

.options-container select {
    width: 100%;
    font-size: 20px;
    border: 0;
    line-height: 1;
    height: 34px;
    outline: none;
    background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat center;
    display: block;
    margin-right: 5px;
    -webkit-appearance: none;
    background-position-x: 215px;
}

.font-container select {
    background-position-x: 20px;
}

.spacing-container select {
    background: url("https://image.flaticon.com/icons/svg/1827/1827633.svg") 0 0;
    background-position-x: 0;
}

感谢您的宝贵时间和对此事的建议。

谢谢

Answer 1

您使用的图标太大，这就是为什么它不可见的原因。因此，您必须使用background-size属性。

.tool-bar {
    width: 100%;
    height: 100%;
    background-color: #a19f9f;
    float: left;
    display: inline;
}

.options-container {
    padding: 10px;
    width: 30%;
    border-left: 3px solid #aaaaaa;
    background-color: #ffffff;
    float:left; display:inline;
}

.font-container {
    width: 10%;
}

.spacing-container{
    width: 10%;
}

.options-container select {
    width: 100%;
    font-size: 20px;
    border: 0;
    line-height: 1;
    height: 34px;
    outline: none;
    background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat center right;
    display: block;
    margin-right: 5px;
    -webkit-appearance: none;
}

.font-container select {
    background-position-x: 100%;
}

.spacing-container select {
    background: url("https://image.flaticon.com/icons/svg/1827/1827633.svg") no-repeat center;
    background-position-x: 100%;
    background-size: 20px;
}

<div class="tool-bar">
    <div class="options-container">
        <select>
            <option value = "times-new-roman">Times New Roman</option>
            <option value = "arial">Arial</option>
            <option value = "courier-new">Courier New</option>
            <option value = "verdana">Verdana</option>
        </select>
    </div>
    <div class="options-container font-container">
        <select>
            <option value = "8">8</option>
            <option value = "10">10</option>
            <option value = "12">12</option>
            <option value = "14">14</option>
          <option value="16">16</option>
            <option value="18">18</option>
            <option value="20">20</option>
            <option value="22">22</option>
            <option value="24">24</option>
        </select>
    </div>
    <div class="options-container spacing-container">
        <select>
            <option value="1">1</option>
            <option value="1.5">1.5</option>
            <option value="2.0">2.0</option>
        </select>
    </div>
</div>

图标未在选项元素中正确显示

1 个答案: