Question

在挖掘bootinsrap 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;
}

有没有人用过这个？我在哪里指定要替换文本的图像？我是否正确地假设所有这一切都是隐藏文本而不是用图像替换它？

Answer 1

是的，这不包括图片，只隐藏文字。您可能需要在自定义CSS规则中进行自己的图像替换：

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

Answer 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 );
}

请注意，此版本不是视网膜 - 使用bootstrap＆＃39; s .img-retina()来自mixins.less而不是上面的背景线，当您提供hdpi图像时...

bootstrap 3内置图像替换？

2 个答案: