梯度和图像上的文字

Question

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

最大的困难是我需要把梯度放在img +文本和箭头图标上。

我尝试两种不同的方式：

1. 我能够把梯度利用:after形象，但现在我不知道如何把图片上的文字和左箭头图像的右侧。

2. 我用<figure>和<figcaption>我认为这个解决方案并不是最好的，使用负边距将文字放在图像上。但在这种情况下，我无法使用:after解决方案。

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

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%); 
 
}

<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>

Answer 1

欢迎来到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证明。

Answer 2

你可以尝试分配cs-item类图，并设置figcaption与z-index:1和position: relative

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%); 
 
}

 
    <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>