Question

尝试将图像添加到我的onclickmenu。尝试将其添加为onclick-menu div中的背景图像。还有其他办法吗？不喜欢javascript。

HTML

<div tabindex="0" class="onclick-menu">
    <ul class="onclick-menu-content">
        <li><button onclick="alert('Unable to login without register')"><form>
                <input type="submit" alt="Submit" value="Login">
            </form> </button></li>
        <li><button onclick="alert('Unable to register')"><form>
                <input type="submit" alt="Submit" value="Register">
            </form></button></li>
        <li><button onclick="alert('Unable to logout while not being online')"><form>
                <input type="submit" alt="Submit" value="Log out">
            </form> </button></li>
    </ul></div>

的CSS

.onclick-menu {
    position: relative;
    display: inline-block;
    background-image: "Login.jpg";
}
.onclick-menu:before {
    content: "1"; //Here´s where the image is supposed to be.

}
.onclick-menu:focus {
    /* clicking on label should toggle the menu */
    pointer-events: none;
}
.onclick-menu:focus .onclick-menu-content {
    /*  opacity is 1 in opened state (see below) */
    opacity: 1;
    visibility: visible;

    /* don't let pointer-events affect descendant elements */
    pointer-events: auto;
}
.onclick-menu-content {
    position: absolute;
    z-index: 1;

    /* use opacity to fake immediate toggle */
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.5s;
}

Answer 1

只需添加网址（）

即可

element:before {
    content: url(images/img.jpg)
}

Answer 2

使用:before或:after选择器，然后根据需要设置样式。 E.g。

element:before { 
content: "images/img.jpg";
}

将图像添加到我的onclick菜单

2 个答案: