ul在div中图片如何显示出来作为ul的背景

要让一个包含 ul 列表的 div 元素的背景显示为图片，可以将背景图片样式定义在 div 上，然后使用伪元素 ::before 或 ::after 为 div 中的 ul 元素添加一个空的内容，并设置其为块级元素，再将其背景设置为透明，这样就可以看到 div 的背景图片了。

HTML 代码：

<div class="dh">
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
</div>

CSS 代码：

.dh {
  background-image: url("../images/dh.jpg");
  /* 其他样式 */
  position: relative; /* 确保伪元素定位相对于该 div */
}

.dh::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

这样，div 元素的背景就会显示为 "../images/dh.jpg" 图片，并且 ul 列表仍然可以正常显示。

相关问题

Ul在DIV居中显示

在HTML中，如果你想让一个`<ul>`（无序列表）元素在`<div>`（块级容器）中水平居中显示，可以采用以下几种方法：

1. **CSS Flexbox**:
如果`<div>`设置了display: flex; 属性，你可以直接将`<ul>`作为其直接子元素，并添加align-items: center; 来达到垂直居中，同时使用 justify-content: center; 来使其水平居中。

<div style="display: flex; align-items: center; justify-content: center;">
   <ul>
     <!-- 列表项 -->
   </ul>
</div>

2. **CSS Grid**:
同样地，如果`<div>`用了display: grid;，则可以设置align-items 和 justify-items 属性来居中列表。

<div style="display: grid; place-items: center;">
   <ul>
     <!-- 列表项 -->
   </ul>
</div>

3. **绝对定位**:
使用CSS position属性将`<ul>`设为 absolute 并给包含它的 div 设置 position: relative 或 fixed，然后设置 left 和 top 为0，right 和 bottom 也可以设置为 0 使它完全居中。

<div style="position: relative; width: 100%; height: 100%;">
   <ul style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
     <!-- 列表项 -->
   </ul>
</div>

ul在div中水平居中

可以通过设置 div 的样式为 display:flex 和 justify-content:center 来实现 ul 水平居中，代码如下：

<div style="display:flex; justify-content:center;">
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
</div>

另外，也可以使用 text-align:center 来实现，代码如下：

<div style="text-align:center;">
  <ul style="display:inline-block;">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
</div>

需要注意的是，第二种方法需要将 ul 的 display 样式设置为 inline-block，否则无法水平居中。