我正在处理一个项目,它的瘦标题是动画的,动画是:当用户展开侧面板时,它占据屏幕的一半,标题缩小到下半部分。
现在问题是,当我将标题设置为屏幕的一半时,徽标会变得像素化,我不知道为什么!
此问题仅适用于webkit浏览器[chrome / Safari]。
这是一个显示问题的视频
https://www.dropbox.com/s/b9hopzqc4cpdfz6/logo-issue.mkv?dl=0
HTML
<div id="topBar" class="clearfix">
<a class="logo pull-left" href="index.html"><img src="images/logo.png" alt=""/>Three.js Project</a>
<ul class="topControls clearfix pull-right">
<li class="pull-left"><i class="fa fa-camera-retro"></i>View
<select name="" id="">
<option value="">Normal</option>
<option value="">Back</option>
<option value="">Inside</option>
</select>
</li>
<li class="pull-left"><a href="#"><i class="fa fa-gear"></i>Settings</a></li>
<li class="pull-left"><a href="#"><i class="fa fa-floppy-o"></i>Save</a></li>
<li class="pull-left"><a href="#"><i class="fa fa-calculator"></i>Calculator</a></li>
<li class="pull-left"><a href="#"><i class="fa fa-lightbulb-o"></i>Help</a></li>
</ul>
</div>
CSS
#topBar {
position: fixed;
height: 40px;
left: 0;
top: 0;
right: 0;
z-index: 950;
background: $sceneSectionsBg;
border-bottom: 1px solid $sceneSectionsBorderColor;
.logo {
margin: 10px 0 0 10px;
display: block;
height: 20px;
img {
margin-right: 7px;
height: 20px;
}
}
.topControls {
list-style: none;
padding: 0;
position: absolute;
top: 10px;
right: 430px;
li {
margin-right: 22px;
color: lighten($controlsActiveColor, 10%);
&:last-child {
margin-right: 15px;
}
.fa {
margin-right: 5px;
}
select {
color: $controlsActiveColor;
font-size: 12px;
height: 20px;
position: relative;
top: -1px;
margin-left: 3px;
}
a {
color: lighten($controlsActiveColor, 10%);
text-decoration: none;
}
&:hover a {
color: lighten($controlsActiveColor, 20%);
}
}
}
}
JS
$(document).on('click', '#sceneCategoriesToggle', function () {
var $sceneCategories = $('#sceneCategories'),
sceneCategoriesWidth = $sceneCategories.outerWidth(),
isExpanded = $sceneCategories.hasClass('expanded'),
$relativePanel = $('#bottomPanel, #topBar .topControls');
if (isExpanded) {
$sceneCategories.animate({right: -sceneCategoriesWidth}, function () {
$sceneCategories.removeClass('expanded');
});
$relativePanel.animate({right: 0});
$('.detailsContent .closeBtn').click();
} else {
$sceneCategories.animate({right: 0}, function () {
$sceneCategories.addClass('expanded');
});
$relativePanel.animate({right: sceneCategoriesWidth});
}
});
感谢。
答案 0 :(得分:0)
我通过使用徽标的另一个小图片解决了这个问题,原始图片为200px X 200px
,徽标为20px X 20px
,所以我使用了一个小图片,这解决了问题。< / p>