Question

我有一个由png图标组成的导航栏。调整页面大小或在其他窗口上显示时，图标不会移动，因此会被切断。我找不到一种方法来调整不同屏幕上的图标大小并使图标在悬停时变白？我知道他们是.png我可能要用白色创建所有图标吗？

无论如何，你可以在http://www.ssangar.com/看到它这是我的导航代码： http://cdpn.io/msjzi

提前致谢！

Answer 1

根据您尝试实现的目标，您可能可以使用不透明度alpha图层，而不是创建另一组白色图标。检查this tutorial。以下是基础知识：

.myMenuItem:hover
 {
 opacity:0.4;
 filter:alpha(opacity=40); /* For IE8 and earlier */
 }

至于调整大小，您只需将大小设置为百分比：

.myMenuItem
 {
 width: 30%;
 height: 20%;
 }

您还可以使用transition或transform添加一些效果：

transform: scale(.5);
transition:width 0.5s ease;

Answer 2

我不太确定我是否100％理解你的问题，但正如Racil所说，你想创建一个css，并将其设置为百分比或像素...

如果您想添加一些转换，我在我的网站上使用此代码：

            nav li a:hover, nav li a.current {
             color: #0099CC;
            -o-transition: background 0.3s linear 0s, color 0.3s linear 0s;
            -webkit-transition: background 0.3s linear 0s, color 0.3s linear 0s;
            -ms-transition: background 0.3s linear 0s, color 0.3s linear 0s;
            -moz-transition: background 0.3s linear 0s, color 0.3s linear 0s;
            transition: background 0.3s linear 0s, color 0.3s linear 0s;}

所有不同转换背后的原因是所有不接受转换代码的旧浏览器。

* 注意：您需要在css代码中提供更多导航信息，以上是仅使其具有转换效果.. *

调整屏幕上的导航菜单PNG大小调整大小

2 个答案: