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中的蓝色背景。任何人都可以帮我缩短它。例如，如果我可以在我的img元素中插入li，那就可以了。

任何帮助都会很棒。

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 */
}