当我们在css中使用url（）时如何设置图像宽度和高度[重复]

Question

我已经在我的页面中实现了可折叠。我想在可折叠的右侧放置向下箭头 img 而不是“+”

我可以通过使用 url() 来设置 img 而不是 '+'，如下所示。

button.accordion:after {
    content: url("download.jpg");
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

现在，如果我使用了 css 的 url()，我该如何设置该图像的宽度和高度。 需要您的宝贵意见。提前致谢！

抱歉，我不会认为这是一个重复的问题。我必须设置图像，但不能设置为背景图像。

Answer 1

由于content中的url不能设置宽高，可以使用backgound-image如下方式设置

button.accordion:after {
content:"";
background-image: url('download.jpg');
display: inline-block;
background-size: 15px 15px;
width:10px;
height:10px
}

为了更好地理解这个

div::before {
  content: url(image.jpg);
}

这实际上是页面上的图像。它也可以是渐变。请注意，以这种方式插入时，您无法更改图像的尺寸。您还可以通过对内容使用空字符串来插入图像，使其显示：以某种方式阻止，调整大小并使用背景图像。这样你就可以用 background-size 重新调整它的大小。在Css-Tricks中阅读更多信息