Question

使用具有一定透明度的背景封面图像使我的顶部导航菜单链接文本难看且难以阅读。我怎样才能使它正确？

HTML -

    <div id="wrapper"> <!-- wrapper starts here -->
    <div id="header"> <!-- header starts here -->
        <h1>example.com</h1>
    </div> <!-- header ends here -->
    <div id="top_nav"> <!-- nav starts here -->
        <ul>
            <li><a href="javascript:void(0)">Menu 1</a></li>
            <li><a href="javascript:void(0)">Menu 2</a></li>
            <li><a href="javascript:void(0)">Menu 3</a></li>
            <li><a href="javascript:void(0)">Menu 4</a></li>
            <li><a href="javascript:void(0)">Menu 5</a></li>
        </ul>
   <div class="clr"></div>
    </div>  <!-- nav ends here -->
    <div style="height:1000px;"></div>
</div>

CSS -

html
{ 
    background:url(http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg) no-repeat center center fixed; 
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}

#wrapper
{
    width:980px;
    margin:0 auto;
    background-color:#FFFFFF;
    background-color:rgba(255, 255, 255, 0.7);
}

#top_nav
{
    width:100%;
    background-color:#3079ED;
    position:relative;
}

#top_nav ul
{
    margin:0;
    padding:0;
    list-style-type:none;
}

#top_nav ul li
{
    float:left;
}

#top_nav ul li a
{
    background-color:#3079ED;
    display:block;
    text-align:center;
    text-decoration:none;
    padding:8px 16px;
    color:#FFFFFF;
    font-size:14px;
    border-right:1px solid #6199DF;
}

#top_nav ul li:last-child a
{
    border-right:none;
}

#top_nav ul li a:hover
{
    background-color:#6199DF;
}

因此，请告诉我如何在保持背景图像透明度的同时，使我的菜单链接文本清晰，更易读，同时保持背景图像的透明度。

这是DEMO

Answer 1

再次回读一下，看看你的主要问题是你如何选择背景，并且该栏不会像CSS所说的那样延伸。尝试进行这些修改。

在#topnav {}

下面

width: 100%;

添加

height: 32px;

高度为0px导致短菜单栏错误。你也可以删除

position:relative;

在这种情况下已经假设了。

我还会从

更改包装器的背景

background-color:rgba(255, 255, 255, 0.7);

到

background-color:rgba(75, 75, 75, 0.45);

并添加

h1
{
color: #fff;
text-shadow: 2px 2px #000;
}

对于至少包含一半深色调的背景，这往往会做得更好。

应该修复您的短导航栏问题并使一切更容易阅读。以及更好地展示你的背景。

DEMO

背景透明图像使文本难看且难以阅读 - CSS

1 个答案: