我正在建立一个菜单,我希望在大屏幕时有一个完整的徽标和一个短徽标(只有产品品牌图像),如果图像是非扫描的。
我目前的SCSS:
#header {
background-color: $header-bg;
z-index: 1001;
@include transition(right .25s $ease-in-circ, padding-right .25s $ease-in-circ);
.branding {
background-color: $sidebar-bg;
width: 250px;
height: 45px;
float: left;
padding: 0 15px;
img.brand {
color: white;
padding-left: 10px;
padding-top: 10px;
height: 40px;
float: left;
@include transition(none);
&:hover {
text-decoration: none;
}
}
.offcanvas-toggle {
color: white;
margin-left: 5px;
opacity: .5;
padding: 1px 4px;
font-size: 18px;
&:hover {
opacity: 1;
}
}
}
和HTML元素:
<header class="clearfix">
<!-- Branding -->
<div class="branding {{main.settings.brandingColor}}">
<img src="/app/images/logo.png" class="brand" ui-sref="app.dashboard" alt="MyApp">
<a href="javascript:;" class="offcanvas-toggle visible-xs-inline" offcanvas-sidebar><i class="fa fa-bars"></i></a>
</div>
<!-- Branding end -->
</header>
现在的样子,如果我收缩窗户,原始徽标就会停留在那里。我应该在哪里放置替代徽标?在另一个<img>
标记中?
感谢您的帮助。
答案 0 :(得分:0)
首先,您在代码中注意到的一件小事。在SCSS中,您提到了#header
。但是在html中,没有id
属性。无论如何,在我的下面的代码片段中,我删除了背景颜色变量和转换以简化代码。我猜这个片段只支持css。所以我需要添加预处理的CSS。
#header .branding {
float: left;
padding: 0 15px;
}
#header .branding .brand {
width: 250px;
height: 45px;
color: white;
padding-left: 10px;
padding-top: 10px;
float: left;
}
#header .branding .brand:hover {
text-decoration: none;
}
@media (max-width: 800px) {
#header .branding .brand {
display: none;
}
}
#header .branding .sml-brand-img {
display: none;
}
@media (max-width: 800px) {
#header .branding .sml-brand-img {
display: block;
width: 50px;
height: 45px;
}
}
#header .branding .offcanvas-toggle {
color: white;
margin-left: 5px;
opacity: .5;
padding: 1px 4px;
font-size: 18px;
}
#header .branding .offcanvas-toggle:hover {
opacity: 1;
}
&#13;
<header id="header" class="clearfix">
<!-- Branding -->
<div class="branding">
<img src="http://lorempixel.com/250/45/" class="brand" ui-sref="app.dashboard" alt="MyApp">
<img src="http://placekitten.com/50/45" class="sml-brand-img" alt="MyApp">
<a href="javascript:;" class="offcanvas-toggle visible-xs-inline" offcanvas-sidebar><i class="fa fa-bars"></i></a>
</div>
<!-- Branding end -->
</header>
&#13;