在挖掘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;
}
有没有人用过这个?我在哪里指定要替换文本的图像?我是否正确地假设所有这一切都是隐藏文本而不是用图像替换它?
答案 0 :(得分:10)
是的,这不包括图片,只隐藏文字。您可能需要在自定义CSS规则中进行自己的图像替换:
.my-image-replacement {
background-image:url('myImage.jpg');
.text-hide();
}
答案 1 :(得分: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' s .img-retina()
来自mixins.less而不是上面的背景线,当您提供hdpi图像时...