html - 使用 url() 作为内容的值时无法调整图像大小

Question

我试图更改插入图像的尺寸，但没有成功。有什么想法吗？

.cricket:before {
  content: url("https://i.ytimg.com/vi/B3VH- vDrMwo/maxresdefault.jpg");
  height: 10px;
  width: 10px;
}

<div class="earth">
  <p> I love earth </p>
</div>
<div class="cricket">
  <p> I love cricket </p>
</div>

Answer 1

:before 选择器必须将 display 属性设置为另一个值(例如 block)才能获取 宽度和高度考虑在内。

另外:content 属性应该包含文本，而不是图像。如果你想显示一个图像，你可以使用 background-image。像这样:

.cricket:before{
   content: '';
   display: block;
   background-image:url(https://i.ytimg.com/vi/B3VH-vDrMwo/maxresdefault.jpg);
   background-size: cover;
   height: 100px;
   width: 100px;
}

Fiddle