Question

我目前正在我的网站上工作，并想为这种情况提出最佳解决方案。

最大的困难是我需要在img +文字和箭头图标上添加渐变。

我尝试了两种不同的方式：

我可以使用:after将渐变放在图像上，但现在我不知道如何将文字放在图像上，而左箭头则放在图像的右侧。
我使用<figure>和<figcaption>我认为这个解决方案并不是最好的，使用负边距将文字放在图像上。但在这种情况下，我无法使用:after解决方案。

我收录了照片 - 在那里你可以看到它应该是什么样的。此外，我正在开始我的编码生涯，如果你发现不良做法，请告诉我！

＆＃13;

figure {
  display: inline-block;
  margin: 15px 12px;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
}

figcaption {
  margin-top: -80px;
}

figcaption p {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 44px;
  text-align: left;
  color: #ffffff;
  font-family: "Proxima Nova";
  font-size: 25px;
  font-weight: 700;
  line-height: 35px;
}

.cs-text {
  margin-top: -10px;
  color: #b9b8b8;
  font-family: "Proxima Nova";
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

figcaption img {
  position: relative;
  float: right;
  padding: 10px 35px 50px 0px;
}

.cs-item {
  position: relative;
  display: inline-block;
  max-width: 430px;
  max-height: 254px;
}

.cs-item:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.11) 36%, rgba(0, 0, 0, 0) 46%);
}

＆＃13;

<div class="case-study-items">
  <div class="cs-item">
    <img src="https://www.upload.ee/image/7272952/case-studies-item.png" alt="">
    <p class="solgu">Melb Lashes</p><img src="https://www.upload.ee/image/7272954/left-arrow.png" /></p>
    <p class="cs-text">Case-study</p>
  </div>
  <figure>
    <img src="https://www.upload.ee/image/7272952/case-studies-item.png" alt="">
    <figcaption>
      <p>Melb Lashes<img src="https://www.upload.ee/image/7272954/left-arrow.png" /></p>
      <p class="cs-text">Case-study</p>
    </figcaption>
</div>

＆＃13;

Case-study views

Answer 1

您可以尝试将cs-item类分配给图，并使用z-index:1和position: relative设置figcaption

＆＃13;

figure {
  display: inline-block;
  margin: 15px 12px;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
}

figcaption {
  margin-top: -80px;
  position:relative;
  z-index:2;
}

figcaption p {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 44px;
  text-align: left;
  color: #ffffff;
  font-family: "Proxima Nova";
  font-size: 25px;
  font-weight: 700;
  line-height: 35px;
}

.cs-text {
  margin-top: -10px;
  color: #b9b8b8;
  font-family: "Proxima Nova";
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

figcaption img {
  position: relative;
  float: right;
  padding: 10px 35px 50px 0px;
}

.cs-item {
  position: relative;
  display: inline-block;
  max-width: 430px;
  max-height: 254px;
}

.cs-item:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
   
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.11) 36%, rgba(0, 0, 0, 0) 46%);
}

＆＃13;

 
  <figure class="cs-item">

    <img src="https://www.upload.ee/image/7272952/case-studies-item.png" alt="">
    <figcaption>
      <p>Melb Lashes<img src="https://www.upload.ee/image/7272954/left-arrow.png" /></p>
      <p class="cs-text">Case-study</p>
    </figcaption>
 </figure>

＆＃13;

Answer 2

欢迎使用StackOverflow。 Be sure to search the site for answers, prior to asking a question。问题实际上是两个问题，并已在其他帖子中得到解答。

对于图像上的渐变，请参阅here。

通过正确构造HTML并简化CSS，文本和箭头图像可以嵌套在具有图像和渐变的父元素中，从而浮动图像和渐变。

<div class="case-study-items">
  <div class="cs-item"> <!-- image and gradient here -->
    <p class="cs-title">Melb Lashes <span class="cs-left-arrow"></span></p>
    <p class="cs-text">Case-study</p>
  </div>
</div>

我创建了Codepen example来演示。

图像上的渐变和文本

2 个答案: