更改 :before 元素的图像大小答案

【问题标题】：Changing the size of an image of a :before element更改 :before 元素的图像大小
【发布时间】：2016-04-06 21:28:04
【问题描述】：

我正在创建一个移动菜单和我想调整图像大小的汉堡菜单按钮的图像。我试过这样做：

Can I change the height of an image in CSS :before/:after pseudo-elements?

但这对我不起作用。我的代码是这样的：

.nav-btn:before {
        background-image: url('icons/mobile_menu_bttn.png');
        background-size: 16px 16px;
        width: 16px;
        height: 16px;
        content:"";
    }

它破坏了代码。

我原来的代码是这样的：

.nav-btn:before {
        content: url('icons/mobile_menu_bttn.png');
 }

我尝试只添加宽度和高度，但也没有用。

有谁知道我如何做到这一点？

【问题讨论】：

你能提供一个小提琴吗？
它怎么破？网站打不开？有什么东西偏离对齐了吗？你的 CSS 是什么？所有没有说清楚的事情。你能发布一个 CODEPEN 或 JFiddle 来解决这个问题吗？谢谢你:)
这是一个小提琴：jsfiddle.net/#&togetherjs=RRaFMqOUel
当我运行background-image 代码时，图像没有出现，菜单也不再掉落。

标签： jquery html css

【解决方案1】：

a) 将display: block; 添加到:before。

b) 在图片 URL 的开头添加http://。

按钮仍然存在，并且工作正常。但是找不到图片资源，所以没有图片。 IE。 URL 有问题，至少 Chrome 在控制台中是这样说的。

【讨论】：

图像有效。抱歉，我在运行之前没有更改代码。我忘记了它之前的http://。 jsfiddle.net/#run&togetherjs=RRaFMqOUel
显示图片，添加display: block;。但是，现在它在我的普通nav-btn 类中忽略了我的text-align: right;。
@Becky 再也看不到代码了。这正是您应该在问题本身中包含所有相关代码的原因，包括 HTML 和 CSS。所以请将代码添加到问题中，以便我们可以复制问题。