Question

我有一段时间试图将对角线性渐变和常规background-image组合在一起 plus 将仅应用到第二个h3元素;这就是我所拥有的：

HTML

<div id="something">
  <div><h3>...</h3></div>
  <div><h3>...</h3></div>
  <div><h3>...</h3></div>
  <div><h3>...</h3></div>
</div>

CSS

#something h3:nth-child(2) {
  background: linear-gradient(135deg, rgba(221,221,221,1) 0%,
  rgba(221,221,221,1) 95%, rgba(0,0,0,1) 95%, rgba(0,0,0,1) 100%),
  #ddd url(/assets/img/bullet.png) left 12px no-repeat;
}

我之前有nth-child选择器处理其他内容，而且这个渐变来自在线生成器，我在这里缺少什么？

Answer 1

看起来选择器应该是：

getNthElement :: Int -> Tree a -> Either Int a
getNthElement _ Nil = Left 0
getNthElement n (Node l v r) = case getNthElement n r of
  (Right x) -> (Right x)
  (Left nr) -> if nr == n then Right v
               else case getNthElement (n-nr-1) l of
                    (Right x) -> (Right x)
                    (Left nl) -> Left $ nl + nr + 1

https://jsfiddle.net/db2n5r63/1/

Answer 2

linear-gradient（）取代url（）。实际上，它们是相同背景下的两个延迟。一个将被选中。因此，更准确地定义您想要的内容，并且可能选择H3内部的跨度来实现您想要的效果。

Answer 3

nth-child h3不会工作，因为#something div:nth-child(2) h3标签包含在div中，所以你可以这样做：

#something div:nth-child(2) h3{ background: url("http://lorempixel.com/300/300/") no-repeat,linear-gradient(135deg, rgba(221,221,221,1) 0%, rgba(221,221,221,1) 95%, rgba(0,0,0,1) 95%, rgba(0,0,0,1) 100%); background-position-x: 12px; }

现在，为了使背景工作，我们将背景图像网址和渐变结合起来。您可以先定义背景网址，然后输入逗号并定义渐变：

This stackoverflow问题更深入地回答了问题。

lubridate

我已经为你Example做了一些事情。

使用nth-child在第三个h3上组合CSS背景图像和渐变

3 个答案: