我正在通过initializr.com 使用响应式版本的html5 样板。我的网站使用自定义 Logo ,因此我将 .ir 类添加到 h1
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
*text-indent: -9999px;
}
像这样
<h1 class="title ir">h1.title</h1>
Add the .ir class to any element you are applying image-replacement to. When replacing an element's content with an image, make sure to also set a specific background-image: url(pathtoimage.png);, width, and height so that your replacement image appears.
所以我在代码中添加了这些行
.ir {
background-image: url(http://i.imgur.com/yYnyJ.jpg);
background-size: 100% auto;
width:450px;
height:450px
}
问题是具体的宽度和高度。我无法摆脱它们,但 Logo 无法以这种方式响应。有想法吗?这是 fiddle 。 http://jsfiddle.net/qeW3e/
最佳答案
我认为这是指在您的目标元素上设置宽度和高度,而不是在 .ir css 类本身中设置宽度和高度。
实际的解决方案可能在网站上看起来更像这样。
HTML
<div class="header">
<div class="logo"><h1 class="title ir">h1.title</h1></div>
<div class="navigation"><p>navigation goes here</p></div>
</div>
CSS
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
text-indent: -9999px;
background-image: url(http://i.imgur.com/yYnyJ.jpg);
background-size: 100% auto;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.header {height:300px;}
.logo {width: 30%; float:left; height: 100%;}
.logo h1 {display:block;}
.navigation {float:left; width: 65%;}
这是 fiddle 示例
关于html - html5 样板中的响应式 Logo (图像替换),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12748939/