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

Question

我正在尝试将对角线线性渐变和常规 background-image 组合在一起 plus 应用它 only 到第二个 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

看起来选择器应该是：

#something > div:nth-child(3) > h3

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

Answer 2

linear-gradient() 取代了 url()。事实上，它们是同一背景下的两个声明。一个将被选中。所以更精确地定义你想要什么，也许在 H3 中选择一个跨度来达到你想要的效果。

Answer 3

你的 nth-child 不会工作，因为 h3 标签被包裹在 div 中，所以你可以这样做吗：

#something div:nth-child(2) h3

现在为了使背景起作用，我们将背景图像 url 和渐变结合起来。您可以先定义背景 url 然后做一个逗号并定义渐变：

This Whosebug 问题更深入地回答了这个问题。

#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;
}

我制作了一个 Example 供您查看实际效果。

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

Combine CSS background-image and gradient on third h3 using nth-child

css

background-image

linear-gradients