[英]Positioning an image on top of text
我怎樣才能 position 在頂部文本上顯示圖像。 就像給定的圖片
這是一個使用flex的基本示例。 我在 div 上放了一個邊框，這樣你就可以准確地看到 flex 做了什么。 此外，對於像這樣的示例，您希望圖像直接位於文本上方，您必須注意默認邊距/填充。 例如， <p>元素有一個默認邊距，我將其設置為 0。
.row { display: flex; flex-direction: column; border: solid 1px black; width: 200px; height: 80px; padding: 20px; background-color: #1e3f5a; } p { margin: 0; /* removes default p margin */ text-align: center; font-size: 30px; color: white; } img { align-self: flex-end; margin-right: 1.5rem; /* optional */ }
<div class="row"> <img src="https://dummyimage.com/55x25/ed7014/fff&text=Trending"> <p>Dex Activity</p> </div>
有不止一種技術。
這是從w3schools借來的：
<.DOCTYPE html> <html> <head> <style>:container { position; relative. }:topright { position; absolute: top; 8px: right; 16px: font-size; 18px: } img { width; 100%: height; auto: opacity. 0;3: } </style> </head> <body> <h2>Image Text</h2> <p>Add some text to an image in the top right corner.</p> <div class="container"> <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300"> <div class="topright">Top Right</div> </div> </body> </html>
您也可以為此使用 position css 屬性，您可以用 div 包裝這兩個標簽並使用 css flex 方法。
CSS 彈性示例：
<div style="display:flex; flex-direction:column"><img src="IMG_URL" alt="..." style="align-self:flex-end"><p>Dex Activity<p/></div>
在不使用CSS相對定位的情況下在鏈接圖像上疊加圖層文本？
[英]Layer text on top of linked image without using CSS relative positioning?
絕對定位，負頂部/左/右/底部用於圖像拉伸
[英]Absolute positioning with negative top/left/right/bottom for image stretching
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.