jquery - 设置列表的背景图片

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

Suggestion: Give a thought to moving away from jQuery-UI. I am not saying the library is bad but it has a lot of such built-in behavior which you are wanting to override. Hence writing custom styles from scratch would be far more easier for you than overriding multiple such jQuery UI styles.

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

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

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

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

  .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