Css 为什么赢了';我的简单图标不会出现吗?
我正在开发一个“平面设计”网站,我决定使用简单的图标。我希望简单图标的背景变暗,而白色叠加图像保持不变。所以,我创建了一个列表(它是一个导航栏)。我还在列表项中添加了一个锚。我尝试将背景图像设置为锚定图标,并将列表项的背景颜色设置为我想要的任何颜色。我还尝试向列表项添加一个过渡以更改背景颜色,但这不起作用,所以我只是放弃了它。以下是整个网站的CSS:Css 为什么赢了';我的简单图标不会出现吗?,css,Css,我正在开发一个“平面设计”网站,我决定使用简单的图标。我希望简单图标的背景变暗,而白色叠加图像保持不变。所以,我创建了一个列表(它是一个导航栏)。我还在列表项中添加了一个锚。我尝试将背景图像设置为锚定图标,并将列表项的背景颜色设置为我想要的任何颜色。我还尝试向列表项添加一个过渡以更改背景颜色,但这不起作用,所以我只是放弃了它。以下是整个网站的CSS: div#nav{ float:right; width:auto; height:37px; padding-top:15px; padding-
div#nav{
float:right;
width:auto;
height:37px;
padding-top:15px;
padding-right:15px;
padding-bottom:5px;
background-color:rgba(100,100,100,0.3);
border-left-color:rgba(255,255,255,0.2);
border-right-color:rgba(255,255,255,0.2);
border-right-width:1px;
border-right-style:solid;
border-left-width:1px;
border-left-style:solid;
border-top-width:1px;
border-top-style:solid;
border-top-color:rgba(255,255,255,0.2);
margin-top:102px;
margin-left:2px;
}
#nav ul{
padding:0;
list-style:none;
margin:0;
}
#nav ul li{
width:32px;
height:32px;
margin-left:15px;
display:inline-block;
background-color:#000000;
border:0;
}
#nav ul li a{
z-index:10;
}
#facebook{
width:32px;
height:32px;
background-image:url('images/facebook.png');
}
以下是HTML:
<div id="nav">
<ul>
<li><a id="facebook" ></a></li>
<li><a id="twitter" ></a></li>
<li><a id="youtube" ></a></li>
</ul>
</div>
- 添加
display: block;
你的锚
锚定标记自然是内联显示的,因为锚定中没有内容,所以即使给它们标注尺寸,也不会看到它们
display: block;
将此添加到您的https://raw.github.com/danleech/simple-icons/master/icons/facebook/facebook-32.png
为空,或者我需要做眼科检查。您是否可以提供网站链接?@j08691我也会这么说。@j08691您的眼睛可能不好了。在firefox中查看,在我的机器上,背景全是黑色的,iamge是一个facebook图标,但它相当漂亮light@Huangism-打得好。至少我知道那不是我的眼睛。只差10秒就赢了我!