Question

input {
    border-radius: 5px;
    border: none;
    font: normal 13px "Trebuchet MS";
    padding: 0 0 0 30px;
    width: 220px;
    height: 30px;
    margin: 0 auto;
    display: block;
    background-color: #ccc;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250.313 250.313" width="512" height="512" enable-background="new 0 0 250.313 250.313"><path d="M244.186 214.604l-54.379-54.378c-.289-.289-.628-.491-.93-.76 10.7-16.231 16.945-35.66 16.945-56.554 0-56.837-46.075-102.912-102.911-102.912s-102.911 46.075-102.911 102.911c0 56.835 46.074 102.911 102.91 102.911 20.895 0 40.323-6.245 56.554-16.945.269.301.47.64.759.929l54.38 54.38c8.169 8.168 21.413 8.168 29.583 0 8.168-8.169 8.168-21.413 0-29.582zm-141.275-44.458c-37.134 0-67.236-30.102-67.236-67.235 0-37.134 30.103-67.236 67.236-67.236 37.132 0 67.235 30.103 67.235 67.236s-30.103 67.235-67.235 67.235z" fill="#475250" fill-rule="evenodd" clip-rule="evenodd"/></svg>');
    background-size: 19px;
    background-position: center 10px;
    background-repeat: no-repeat;
}

此代码应显示一个输入栏，搜索图标从左侧开始10px并垂直居中，而不是它位于栏的中心并垂直偏移。当我改变时：

    background-position: center 10px;

为：

    background-position: center left;

它做了我想要的但却缺少左边的10px填充。关于这里发生了什么的任何线索？我只是无法正常工作。

Answer 1

background-position: 10px center应该为你做。

使用center和left只使用关键字，浏览器以某种方式能够正确，因为他可以告诉左边不是一个垂直单位。

输入栏中的背景位置SVG搜索图标（可能的错误？）

1 个答案: