Question

我已经开始学习HTML / CSS但遇到了一个问题，这个问题有时会在这里讨论，但解决方案似乎并没有解决我的问题，所以我想知道我做错了什么。

我想在CSS中使用 content：url（），特别是因为我想要更改一些图像：hover。

在搜索此问题后，解决方案提及here和其他线程（包括：之前），使图像显示，但完全忽略高度/宽度设置，有效地显示图像，但具有原始大小。

还尝试将其更改为“ background-image：url（）”，但问题仍然存在。为什么不接受高度/宽度？我在这里很傻。

<div id="logo"></div>

CSS：

#logo {
  content: url(images/asspreto.png);
  height: 90px;
  width: 168px; /*only had height set, but tried to put width as well to see if it worked. It doesn't */
  float: right;
  vertical-align: middle;
}

#logo:hover {
  content:url(images/assazul.png);
  cursor: pointer;
}

Answer 1

如果您希望图像适合可用空间，则需要指明。您可以使用background-size指令执行此操作。为了使图像适合可用空间，但保持其纵横比，请使用(function(){ var item = 1; /*setInterval(function(){ document.getElementById("test").innerText = String(++item); console.log("this is test"); },5000)*/ })();。

这是一个例子。您可以看到图像是如何缩放的，并且不会填满整个元素。

contain

#logo {
  width: 400px;
  height: 300px;
  background-image: url('https://placehold.it/500?text=500x500, but scaled');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid #000;
}

Answer 2

以下是我的解释：您无法通过content: url()更改提供给渲染的媒体的尺寸。虽然在规范中没有提到，但是你可以看到，在伪元素的帮助下放置媒体时，设置尺寸根本不起作用。

我自己对此进行了一些实验，这就是我想出来的：http://codepen.io/rahul_arora/pen/GWvNgJ

你很简单无法调整使用height，width，object-fit等伪元素插入的媒体的大小。它将占用空间，只有overflow可以帮助你隐藏它的溢出。

如果您真的想在仅使用伪元素的帮助下完成此操作，另一种方法是将图像用作background。

.logo {
  position: relative;
  height: 90px;
  width: 168px;
}

.logo:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background: url(https://unsplash.it/g/200/200?image=1062) 0 0 no-repeat / cover;
  height: 100%;
  width: 100%;
}

.logo:hover:after {
  background-image: url(https://unsplash.it/200/200?image=1062);
}

<div class="logo"></div>

我希望能为你解决这个问题。干杯！

Answer 3

＆＃13;

#logo:before {
  background: url("https://www.gravatar.com/avatar/732637806aee1bf98e7ef1f3658db84a?s=328&d=identicon&r=PG&f=1")no-repeat;
  height: 200px;
  width: 100%; /*only had height set, but tried to put width as well to see if it worked. It doesn't */
  float: right;
  vertical-align: middle;
  content:"";
  height:300px;
  width:300px;
  position:absolute;
  top:0;
  left:0;
}
#logo{position:relative;}

＆＃13;

<div id="logo"></div>

＆＃13;

content：url（）无法在firefox中运行，::在/ ::之后不修复它

3 个答案: