bootstrap 3 内置图像替换？答案

【问题标题】：bootstrap 3 built in image replacement?bootstrap 3 内置图像替换？
【发布时间】：2014-03-13 21:45:28
【问题描述】：

在挖掘 bootstrap 3 的 mixins.less 文件时，我发现了以下内容：

// CSS image replacement
//
// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
// mixins being reused as classes with the same name, this doesn't hold up. As
// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note
// that we cannot chain the mixins together in Less, so they are repeated.
//
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757

// Deprecated as of v3.0.1 (will be removed in v4)
.hide-text() {
  font: ~"0/0" a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
// New mixin to use as of v3.0.1
.text-hide() {
  font: ~"0/0" a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

有人用过吗？我在哪里指定要替换文本的图像？我是否可以假设所有这些都是隐藏文本而不是用图像替换它？

【问题讨论】：

标签： css twitter-bootstrap less

【解决方案1】：

是的，这不包括图像，它只隐藏文本。您将需要自己进行图像替换，也许在自定义 CSS 规则中：

.my-image-replacement {
  background-image:url('myImage.jpg');
  .text-hide();
}

【讨论】：

【解决方案2】：

为方便起见，我使用以下内容：

.image-replacement( @url, @width, @height ) {
    display: block;
    width: @width;
    height: @height;
    background: url(@url) no-repeat left top;
    .text-hide();
}

.logo {
    .image-replacement( "images/logo.png", 100px, 50px );
}

请注意，此版本不是视网膜 - 当您提供 hdpi 图像时，请使用来自 mixins.less 的引导程序 .img-retina() 而不是上面的背景行...

【讨论】：