Question

我正在使用Chrome，而我正在尝试制作背景按钮图片。但它只是不会显示！我（我想）已经尝试了一切。

我已添加：<link rel="stylesheet" type="text/css" href="./css/style.css" />

1。 HTML

<div id="menu">
    <a href="#" /> Home</a>
    <a href="#" /> About</a>
    <a href="#" /> Sign Up</a>
    <a href="#" /> Sign In</a>
    <a href="#" /> Impressum</a>
</div>`

2。 CSS

@media screen and (max-width:1280px) {
    #menu {
        background-image: url('../img/menubg.png');
        position: absolute;
        top:0px;
        right:0px;
        height: 37px;
        padding-top: 19px;
        margin-right: 4%;
    }
}

@media screen and (min-width:1280px) {
    #menu {
        background-image: url('../img/menubg.png');
        position: absolute;
        top:0px;
        right:0px;
        height: 37px;
        padding-top: 19px;
        margin-right: 6%;
    }
}

@media screen and (min-width:1920px) {
    #menu {
        background-image: url('../img/menubg.png');
        position: absolute;
        top:0px;
        right:0px;
        height: 37px;
        padding-top: 19px;
        margin-right: 10%;
    }
}

#menu a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 14px;
    background-image: url('../img/menubg.png');
    background-repeat: no-repeat;
    padding-top: 19px;
    padding-bottom: 22px;
    padding-left: 10px;
    padding-right: 10px;
}

#menu a:hover {
    background-image: url('../img/menubg.png');
}

Answer 1

好的，我注意到你正在根据屏幕宽度改变菜单的位置，所以我猜你试图将它居中。所以我删除了媒体标签，现在只有一个#menu css部分。

如果我错误地解释了这一点，那么只需将其恢复为之前的状态。

至于背景图片，你现在有什么作品。所以我猜你的图片链接是错误的。如果您打开开发人员工具并检查锚点，那么如果您的图像链接无效，则背景图像属性将被删除。

作为证明它确实有用的证据我从谷歌添加了一个随机图片：

＆＃13;

#menu{
    position: absolute;
    top: 0%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0%);
    text-align:center;
    background-color:blue;
}

#menu a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 14px;
    background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRtXT6s3Qg8rFrxuDbC2mI7df8ef3CBq4W9wNE8r1lwb991vs_x');
    background-repeat: no-repeat;
    padding: 19px 10px 22px 10px;
}

#menu a:hover {
    background-image: url('../img/menubg.png');
}

＆＃13;

<div id="menu">
    <a href="#" > Home</a>
    <a href="#" > About</a>
    <a href="#" > Sign Up</a>
    <a href="#" > Sign In</a>
    <a href="#" > Impressum</a>
</div>

＆＃13;

<style>
#menu{
    position: absolute;
    top: 0%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0%);
    text-align:center;
    background-color:blue;
}

#menu a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 14px;
    background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRtXT6s3Qg8rFrxuDbC2mI7df8ef3CBq4W9wNE8r1lwb991vs_x');
    background-repeat: no-repeat;
    padding: 19px 10px 22px 10px;
}

#menu a:hover {
    background-image: url('../img/menubg.png');
}
</style>
<div id="menu">
    <a href="#" > Home</a>
    <a href="#" > About</a>
    <a href="#" > Sign Up</a>
    <a href="#" > Sign In</a>
    <a href="#" > Impressum</a>
</div>

CSS按钮背景图像不会出现

1 个答案: