设置列表的背景图片

Question

我对目前的列表感到满意。但是我觉得我可以做一些开创性的事情。我想设置一个背景图像（这是我认为的唯一方法），以便每个li 都显示在图像的相应行中。这是我的jsFiddle，看起来不太好。

CSS 是：

ol {
    display: inline-block;
    background-image: url("http://pixelbrush.ru/uploads/posts/2013-01/1359314378_0001-2.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

这可能吗？如果是，怎么做？

请注意，如果有帮助，可以更改图像。

Answer 1

建议：考虑一下摆脱 jQuery-UI。我并不是说这个库不好，但它有很多你想要覆盖的内置行为。因此，从头开始编写自定义样式比覆盖多个此类 jQuery UI 样式要容易得多。

您添加background-image 的方式并不正确，但库中更具体的选择器将背景和边框颜色应用于ol 上方的li 元素。因此，他们最终会隐藏您添加的图像。要克服它，请应用以下设置：

• 使用比库使用的选择器更具体的选择器将ol 内的li 和a 元素的background 设置为透明。此外，由于您尝试使用的背景图像不是直的，因此边框看起来像是在垫外流动，因此也使它们无效。

  .ui-page-theme-a .ui-block-a ol li.ui-bar-inherit, .ui-page-theme-a .ui-block-a ol li a.ui-btn{
    background: transparent; /* set background of the lis to transparent */
    border-color: transparent; /* set border color to transparent */
  }

• 设置ol 元素的padding-top 以便在内容开始之后的小间隙之间存在间隙。这可以防止标题（欧洲）出现在剪辑顶部。

  .ui-page-theme-a .ui-block-a ol.ui-listview-inset{
    padding-top: 3em; /* adding some padding-top to ol to make header come where we want it to */
  }

• 最后，将background-size设置为cover为父ol而不是contain覆盖意味着占据容器的整个宽度和高度。

  ol {
    display: inline-block;
    background-image: url("http://pixelbrush.ru/uploads/posts/2013-01/1359314378_0001-2.jpg");
    background-size: cover ;
    background-repeat: no-repeat;
  }

Demo Fiddle