Question

我正在为导航系统创建带有背景图像的按钮。令人沮丧的是，所有背景图像都在CODA测试浏览器中正确显示，因此我知道文件路径是正确的，但它们在Chrome / Firefox / Safari中根本不显示。如果有人有任何建议他们可以提供我会非常感激。

指向测试站点的链接：http://parkerrichard.com/new/index.html

HTML

    <nav class="centered" role="navigation">
    <div class="container">
        <div class="centered">
            <ul>
                <li>
                    <a href="#"><button class="design"></button></a>
                </li>
                <li>
                    <a href="#"><button class="photo"></button></a>
                </li>
                <li>
                    <a href="#"><button class="music"></button></a>
                </li>
                <li>
                    <a href="#"><button class="art"></button></a>
                </li>
                <li>
                    <a href="#"><button class="parker"></button></a>
                </li>
            </ul>
        </div>
        <ul class="nav-glyphs">
            <li>
                <a href="#"><span class="glyphicon glyphicon-cog"></span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-camera"></span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-music"></span></a>
            </li>
            <li>
                <a href="#"><span class="glyphicon glyphicon-pencil"></span></a>
            </li>
        </ul>
        <ul class="nav-words">
            <li>
                <a href="#">ART</span></a>
            </li>
            <li>
                <a href="#">MUSIC</span></a>
            </li>
            <li>
                <a href="#">PHOTO</span></a>
            </li>
            <li>
                <a href="#">DESIGN</span></a>
            </li>
        </ul>

    </div><!--/container -->
</nav><!--/navbar -->

CSS

nav button {
    border-radius:50%;
    position: absolute;
    opacity: 50% !important;
    left: 50%;
    right: 50%;
}

.parker {
    margin-top: 200px;
    margin-left: -100px;
    width: 200px;
    height: 200px;
    background: transparent url('img/parker.jpg');
    background-size: 100%;
    opacity: 1 !important;
    cursor: hand;
}

.art {
    margin-top: 150px;
    margin-left: -150px;
    width: 300px;
    height: 300px;
    background: transparent url('img/art.jpg');
}

.music {
    margin-top: 100px;
    margin-left: -200px;
    width: 400px;
    height: 400px;
    background: transparent url('img/music.jpg');
}

.photo {
    margin-top: 50px;
    margin-left: -250px;
    width: 500px;
    height: 500px;
    background: transparent url('img/photo.jpg');
}

.design {
    margin-left: -300px;
    width: 600px;
    height: 600px;
    background: transparent url('img/design.jpg');
}

Answer 1

而不是速记，请尝试明确设置值

例如：

background-color: transparent;
background-image: url(...);

Answer 2

愚蠢的错误！在每个网址之前，背景图片只需要一个“../”（我忘记了我的css在根目录下的自己的文件夹中）

Answer 3

为所有按钮类添加不透明度值

.art, .parker, .music, .photo, .design {
opacity:0.5;
}

按钮背景图像不会显示

3 个答案: