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的方式并不正确，但库中更具体的选择器正在应用背景＆amp;边框颜色为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的{{1}}而不是ol。封面意味着占据容器的整个宽度和高度。< / p>
```
contain
```

Demo Fiddle

设置列表的背景图像

1 个答案: