使用:: before

Question

我已经看到很多人这样做和教程，但是由于某些原因，当我尝试它时它不起作用，如果是因为我正在使用按钮，但是当我使用:: before放置它时，我就不会这样做按钮上的图像在文本之前没有任何反应，只是有一个空白。

<style>
    .btn1::before {
        content: "";
        background: url("./imgs/Discord-logo.png") no-repeat;
        width: 20px;
        height: 20px;
        float: left;
    }
</style>

<button class="btn btn1">Add to server</button>

Answer 1

尝试将background-size设置为contain。如您在片段中所见，这确实有效。如果仍然不适合您，则建议您确保路径./imgs/Discord-logo.png是正确的，并且可以实际加载映像。在浏览器DevTools中检查“网络”标签，以查看是否可以加载图像。

.btn1::before {
  content: "";
  background: url("https://d1qb2nb5cznatu.cloudfront.net/startups/i/90183-bed46f22aafe8af7dc65cdd73fff2f76-medium_jpg.jpg?buster=1481325396") no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
  float: left;
}

<button class="btn btn1">Discord</button>

Answer 2

嗯，试试看

.btn1::before {
    content: "";
    background: url("./imgs/Discord-logo.png") no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
}