使用第n个子元素在第三个h3上组合CSS背景图像和渐变

我花了很长时间尝试将对角线线性渐变和常规

背景图像

结合在一起，并仅将其应用于第二个

h3

元素；以下是我得到的：

HTML

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

---

我之前已经让第n个孩子选择器处理过其他东西，这个渐变来自一个在线生成器，我这里缺少了什么？

看起来选择器应该是：

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

---

看起来选择器应该是：

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

---

线性-渐变（）代替url（）。事实上，它们是同一背景下的两个三角洲。一个将被选中。因此，请更精确地定义您想要的内容，并可能在H3中选择一个跨度以实现您想要的效果。

线性-渐变（）取代url（）。事实上，它们是同一背景下的两个三角洲。一个将被选中。因此，请更精确地定义您想要的内容，并可能在H3中选择一个跨度以实现您想要的效果。

您的

n子项

无法工作，因为

H3

标记被包装在一个div中，因此您可以执行以下操作：

#某物分区：第n个孩子（2）h3

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

stackoverflow问题更深入地回答了这个问题

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

---

我已经为您制作了一个示例，让您看到这一点。

您的

n个孩子

无法工作，因为

h3

标记被包装在一个div中，因此您可以这样做：

#某物分区：第n个孩子（2）h3

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

stackoverflow问题更深入地回答了这个问题

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

---

我已经为您做了一个准备，让您看到这一点。

太棒了，很高兴能提供帮助@Johnawesome，很高兴能帮上忙@约翰