在開始之前，我不是指text-overflowCSS 中的那些。我實際上指的是其中之一：
我在這里想要實作的是文本有目的地與影像相交或溢位。這樣，你就得到了你從圖片中看到的文本溢位效果。知道這是如何使用 CSS 實作的嗎？
uj5u.com熱心網友回復：
您沒有指定足夠的內容，但我相信您想要這樣的東西：
- 創建一個 div 用作背景
- 為創建的 div 提供背景影像
- 將 img 居中放在背景上，并為 div 提供寬度/高度
- 添加文字
- 完畢
.background {
background-image: url('https://images.unsplash.com/photo-1513530534585-c7b1394c6d51?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb- 1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471');
background-size: cover;
background-position: center;
width: 400px;
height: 300px;
display: flex;
align-items: center;
border: 1px solid black;
}
.background > p {
margin-left: 10px;
font-size: 30px;
}<div class="background">
<p>Text over the img</p>
</div>uj5u.com熱心網友回復：
您可以position: absolute;用于影像層
.container {
position: relative; /* Add the image and content to be relative */
}
.image-layer {
position: absolute; /* Make the image flexible in the container */
top: 0; /* Place the image to the top side of the container */
right: 0; /* Place the image to the right side of the container */
z-index: -1; /* Put the image under the main layer which has content */
}<div class="container">
<div>
<h1>
Your text layer for testing purpose
</h1>
</div>
<div class="image-layer">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" width="500" height="500" />
</div>
</div>uj5u.com熱心網友回復：
您可以將文本放在覆寫容器中，這樣，您可以根據需要添加更多專案。在 codepen 上演示
.container {
position: relative;
width: 100%;
min-height: 600px;
border: 1px solid black;
display: flex;
justify-content: right;
}
.container img {
width: 50%;
height: auto;
object-fit: cover;
}
.container h4 {
font-size: 3rem;
max-width: 60%;
}
.overlay {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: flex;
align-items: center;
}<div class="container">
<img src="https://images.pexels.com/photos/2857477/pexels-photo-2857477.jpeg?cs=srgb&dl=pexels-deepu-b-iyer-2857477.jpg&fm=jpg" />
<div class="overlay">
<h4>Apparently, we had reached a great height in the athmosphere
</h4>
</div>
</div>uj5u.com熱心網友回復：
像一個選項一樣，您可以使用grid方法將文本內容疊加在影像的前面。在這種情況下，您的文本和影像將相互關聯，請參閱代碼片段了解詳細資訊：
此外，要管理疊加層大小，您可以使用 CSS 變數，例如這個--overlay-size: 10%;。
.wrapper-grid {
display: grid;
grid-template-areas: 'content'; /* creating grid areas */
align-items: center;
--overlay-size: 10%; /* overlay size */
}
.wrapper-grid .text,
.wrapper-grid .image {
grid-area: content; /* use same cell for text and image */
}
.wrapper-grid .text {
z-index: 1; /* place text in front of image */
max-width: calc(50% var(--overlay-size, 0));
font-size: 1.5rem;
font-weight: bold;
line-height: 1.4;
}
.wrapper-grid .image {
width: calc(50% var(--overlay-size, 0));
justify-self: flex-end; /* aligning image to the right */
}<div class="wrapper-grid">
<p class="text">Maecenas egestas arcu quis ligula mattis placerat. Suspendisse pulvinar, augue ac venenatis condimentum.</p>
<img class="image" src="https://picsum.photos/seed/picsum/600/400" />
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/480329.html
上一篇：單擊影像時彈出螢屏