时间戳

首页 > 解决方案 > 我正在尝试向 img 添加线性渐变。在有边界的同时

html - 我正在尝试向 img 添加线性渐变。在有边界的同时

问题描述

这是我的html代码：

 <div class="container" style="margin-top:30px">
      <div class="row">
        <div class="col-sm-4">
          <h2>About Me</h2>
          <h5>Photo of me:</h5>
          <div class="party">
          <img class="party-img" src="party.jpg"></img>
          </div>

这是我的CSS代码：

.container .row .col-sm-4 .party {
    border-left: 5px solid black;
    border-bottom: 3px solid black;
    border-top: 1.7px solid black;
    border-right: 1.7px solid black;
    
}

.container .row .col-sm-4 .party .party-img img{
    position: relative;
    z-index: -1;
    background-image: linear-gradient(to right, yellow, blue)

}

当我应用渐变时，渐变不存在。

标签： htmlcssborderlinear-gradients

解决方案

您的第二个 CSS 规则的选择器不匹配任何元素，这就是为什么您看不到第二个 CSS 规则的效果。

最后一部分.party-img img是尝试选择一个带有标签的 DOM 元素，该标签img是另一个具有 class 的 DOM 元素的子元素（在任何深度）party-image。由于这在您的布局中不存在，因此它不匹配任何内容。

这意味着您必须将选择器更改为 .container .row .col-sm-4 .party img.party-img 或简单地 更改为.container .row .col-sm-4 .party .party-img

img.party-img匹配<img>同样具有 class 的元素的方法party-img。

请记住，上面的 2 个版本并不相同，第一个只会匹配 an <img class="... party-img ...some-other-class">，而第二个会匹配任何具有 class 的标签party-img。在您的情况下会产生相同的结果，但是如果您的布局会改变，请记住一些事情。

此外，正如评论中已经提到的，该<img>元素在 HTML 中没有结束标记。<img ... >在您的情况下将其更改为 just <img class="party-img" src="party.jpg">。

如果在进行这些更改后，渐变仍未按您希望的那样显示，请检查评论中链接到原始问题的其他 SO 答案。

推荐阅读