將圖像添加到我的onclick菜單

Question

試圖將圖像添加到我的onclickmenu。嘗試添加它作爲onclick菜單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

使用:before或:after選擇，然後根據需要樣式。例如。

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

Answer 2

只需添加URL（）具有.onclick菜單

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