内容：url（）在firefox中不起作用，::before/::after没有修复它[重复]

Posted 2023-03-06

【中文标题】内容：url（）在firefox中不起作用，::before/::after没有修复它[重复]

【英文标题】：content: url() not working in firefox, ::before/::after not fixing it [duplicate]

【发布时间】：2017-08-04 20:39:59

【问题描述】：

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

我想在 CSS 中使用 content: url()，特别是因为我想在 :hover 上更改一些图像。

搜索此问题后，here和其他线程上提到的解决方案（包括:before），使图片出现，但完全忽略了高/宽设置，有效地显示图像，但具有原始大小。

也尝试将其更改为“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;

【问题讨论】：

您是否尝试将height 和width 添加到元素的伪类中？

【参考方案1】：

#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;

#logoposition:relative;

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

【讨论】：

还在答案中添加一些注释/描述

【参考方案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>

希望能为您解决。干杯！

【讨论】：

伪元素，但是是的，这是正确的。在现在提供的重复链接中查看我的答案。

感谢您的更正，BoltClock！我编辑了答案，使其听起来更加理智和技术上正确。现在阅读您的答案..

【参考方案3】：

如果您希望图像适合可用空间，则需要指明。您可以使用background-size 指令执行此操作。要使图像适合可用空间，但保持其纵横比，请使用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;

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