Question

我正在使用LESS创建一个自定义的Ghost.org模板[在我的脑海里]。该设计需要水平导航按钮，其中两个按钮具有图标以及文本作为导航提示。

我的代码是根据codepen.io

上的两个示例构建的

首先是创建干净利落的导航按钮： http://codepen.io/nandu/pen/fkiJn

第二个添加图标： http://codepen.io/Cheesetoast/pen/qACsJ

这似乎是一个文件路径问题，但也可能是由于运行Ghost本身。

这就是我所拥有的：

nav ul li a.ss_logo_button {
.NavFont;
text-decoration: none;
background-color: @color-03;
padding: 1.5em;
text-transform: uppercase;
background: url("file:///C:/Users/mememememe/Desktop/old_ghost/ghost-0.3.3/content/themes/BI-v3/assets/images/SeedSpark-Logo-Sq.png") no-repeat 0px -2px transparent;
}

我以前一直在使用这个标签，但这似乎是更正确的方法。另外[应该]风格更好。

那么，希望是一个非常简单的解决方案？

Answer 1

答案是“嗨，我在Mac上”的组合+“是的，鬼是'正在运行'，即使它是本地的”*“必须在em的”中设置高度/宽度“

nav ul li a.ss_logo_button {
.NavFont;
text-decoration: none;
background-color: @color-03;
padding: 1.5em;
text-transform: uppercase;
background: url('../images/SeedSpark-Logo-Sq.png') no-repeat 1em 1em;
}

好的一点是，当它上线时，路径根本不需要改变。

感谢@nrrrdcore @kurafire @timocratic @eatings跳起来＆amp;帮忙！

Answer 2

 nav ul li a.ss_logo_button {
      .NavFont;
      text-decoration: none;
      background-color: @color-03;
      padding: 1.5em;
      text-transform: uppercase;
      background-image: url("file:///C:/Users/mememememe/Desktop/old_ghost/ghost-0.3.3/content/themes/BI-v3/assets/images/SeedSpark-Logo-Sq.png");
      background-repeat : no-repeat;
      backgground-position:0px 2px;

}

尝试这个css它可能适用于颜色和图像作为背景。

使用LESS的鬼魂模板，没有装载的按钮的背景图象

2 个答案: