CSS技巧，以縮短我的冗餘代碼

Question

我有一個HTML看起來像這樣：

<ul> 
    <li> 
    <img src="<?php echo base_url();?>assets/images/blue_background.png" class ="menu-bg"/> 
    <a href="#" class="menu-portal"></a> 
    </li> 
    <li> 
    <img src="<?php echo base_url();?>assets/images/blue_background.png" class ="menu-bg"/> 
    <a href="#" class="menu-tags"></a> 
    </li> 
    <li> 
    <img src="<?php echo base_url();?>assets/images/blue_background.png" class ="menu-bg"/> 
    <a href="#" class="menu-requests"></a> 
    </li> 
    <li> 
    <img src="<?php echo base_url();?>assets/images/blue_background.png" class ="menu-bg"/> 
    <a href="#" class="menu-videos"></a> 
    </li> 
</ul> 

正如你可以看到上面的代碼，我不停地重複着我的藍色背景這件img。任何人都可以幫我縮短這一點。例如，如果我可以在我的li元素中插入img，那就行。

任何幫助將是偉大的。

Answer 1

將其用作背景，而不是定義單獨的圖像標籤。

ul li { 
    background-image: url("assets/images/blue_background.png"); 
    height: 30px; /* height of the image */ 
    width: 30px; /* width of the image if the size is fixed */ 
}