梯度和圖像上的文字

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>