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），以便将width和height考虑在内

也：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

Answer 2

您误解了content的作用。您需要设置一个空内容，将该元素显示为块级项目，然后使用background：

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

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

Answer 3

看看这个.....

http://jsfiddle.net/2c6qhu5e/14/

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

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

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

</body>
</html>

    .cricket:before{
  position: absolute;
   top:0;
    left:0;
    content: " ";
    background: url(https://i.ytimg.com/vi/B3VH-vDrMwo/maxresdefault.jpg);
    background-size: 100% 100%;
    width: 400px;
    height: 400px;
    margin: 2px;
    float: left;
}

使用url（）作为内容的值时，无法调整图像的大小

3 个答案: