堆棧內存溢出
  簡體   English   中英

如何放置<div id="text_translate"><p>我在頁面中有一些相互下方的圖像，並希望在圖像上垂直而不是水平添加跨度覆蓋文本。我當前的代碼水平顯示（在 iPhone 屏幕上）跨度覆蓋文本，但我想垂直顯示它並從中讀取自下而上。希望你們幫助我。 謝謝</p><p><a href="https://i.stack.imgur.com/g7mt5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g7mt5.png" alt="在此處輸入圖像描述"></a></p><pre> &lt;html&gt; &lt;head&gt; &lt;style&gt; &lt;/style&gt; &lt;script&gt; //here I get the items information from db using ajax method and construct the item information blocks and append it to div called demo &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="demo"&gt; &lt;strong&gt;1)Item 1&lt;/strong&gt;&lt;br&gt; &lt;div style="text-align: right;"&gt;70&lt;br&gt; &lt;/div&gt; &lt;div style="position: relative; z-index: 1;"&gt; &lt;img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/8e2d81eb3e854642b5dca97600fd73c7_9366/Firebird_Track_Pants_Black_ED6897_25_model.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"&gt; &lt;/div&gt; &lt;span id="overlay_text" style="position: relative; top: -10px; z-index: 3;background-color:white;line-height:50px"&gt;SOLD OUT&lt;/span&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt; &lt;a href="https://www.mywebsite.com/item1.html"&gt;https://www.mywebsite.com/item1.html&lt;/a&gt; &lt;br&gt;Available Sizes:XS,S,M,L,XL,2XL &lt;br&gt;------------------------------------------------------------------------------------&lt;br&gt; &lt;strong&gt;2)Item 2&lt;/strong&gt;&lt;br&gt; &lt;div style="text-align: right;"&gt;65&lt;br&gt; &lt;/div&gt; &lt;div style="position: relative; z-index: 1;"&gt; &lt;img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/bf500e3fd9c74e458cf4aaf00125990a_9366/Firebird_Track_Pants_Blue_FM3813_01_laydown.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"&gt; &lt;span id="overlay_text" style="position: relative; top: -10px; z-index: 3;background-color:white;line-height:50px"&gt;&lt;/span&gt;&lt;/div&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;a href="https://www.mywebsite.com/item2.html"&gt;https://www.mywebsite.com/item2.html&lt;/a&gt; &lt;br&gt;Available Sizes:XS,S,M,L,XL,2XL &lt;br&gt;------------------------------------------------------------------------------------&lt;br&gt;</pre><p></p><pre> &lt;/body&gt; &lt;/html&gt;</pre></div>

[英]How to place <span overlay text vertically over an image?

 原文  2020-04-18 23:59:45  9   2    html/ css

問題描述

我在頁面中有一些相互下方的圖像，並希望在圖像上垂直而不是水平添加跨度覆蓋文本。我當前的代碼水平顯示（在 iPhone 屏幕上）跨度覆蓋文本，但我想垂直顯示它並從中讀取自下而上。希望你們幫助我。 謝謝

在此處輸入圖像描述

<html>
<head>
<style>


</style>

<script>
//here I get the items information from db using ajax method and construct the item information blocks and append it to div called demo
</script>

</head>
<body>
<div id="demo">
<strong>1)Item 1</strong><br>
<div style="text-align: right;">70<br> </div>
<div style="position: relative; z-index: 1;">
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/8e2d81eb3e854642b5dca97600fd73c7_9366/Firebird_Track_Pants_Black_ED6897_25_model.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"> </div>
<span id="overlay_text" style="position: relative; top: -10px; z-index: 3;background-color:white;line-height:50px">SOLD OUT</span>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br>
<a href="https://www.mywebsite.com/item1.html">https://www.mywebsite.com/item1.html</a>
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------------------------------------------<br>

<strong>2)Item 2</strong><br>
<div style="text-align: right;">65<br> </div>
<div style="position: relative; z-index: 1;">
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/bf500e3fd9c74e458cf4aaf00125990a_9366/Firebird_Track_Pants_Blue_FM3813_01_laydown.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"> 
<span id="overlay_text" style="position: relative; top: -10px; z-index: 3;background-color:white;line-height:50px"></span></div>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br>
<a href="https://www.mywebsite.com/item2.html">https://www.mywebsite.com/item2.html</a>
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------------------------------------------<br>


</body>
</html>

2 個解決方案

解決方案1
 1  2020-04-19 00:33:47

Css 變換Css 變換和變換原點不會傷害任何一個變換原點這里是一個簡單的例子。 

 .wrapper{ height: 500px; width: 500px; position:relative; background: rgb(220,220,220); }.wrapper span{ position:absolute; top:100px; left: 20px; font-size: 20px; font-weight: bold; /*important part below*/ transform: rotate(-90deg); transform-origin: top left; }
 <div class="wrapper"> <span>Sold Out</span> </div>

因此，使用您的代碼將類似於： 

 <html> <head> <style> </style> <script> //here I get the items information from db using ajax method and construct the item information blocks and append it to div called demo </script> </head> <body> <div id="demo"> <strong>1)Item 1</strong><br> <div style="text-align: right;">70<br> </div> <div style="position: relative; z-index: 1;"> <img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/8e2d81eb3e854642b5dca97600fd73c7_9366/Firebird_Track_Pants_Black_ED6897_25_model.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"> </div> <span id="overlay_text" style="position: relative; z-index: 3;background-color:white;transform: rotate(-90deg); transform-origin: top left; display:inline-block; top: 100px;left: 10px">SOLD OUT</span> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br> <a href="https://www.mywebsite.com/item1.html">https://www.mywebsite.com/item1.html</a> <br>Available Sizes:XS,S,M,L,XL,2XL <br>------------------------------------------------------------------------------------<br> <strong>2)Item 2</strong><br> <div style="text-align: right;">65<br> </div> <div style="position: relative; z-index: 1;"> <img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/bf500e3fd9c74e458cf4aaf00125990a_9366/Firebird_Track_Pants_Blue_FM3813_01_laydown.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"> <span id="overlay_text" style="position: relative; z-index: 3;background-color:white;transform: rotate(-90deg); transform-origin: top left; display:inline-block; top: 100px;left: 10px">Sold Out</span></div> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br> <a href="https://www.mywebsite.com/item2.html">https://www.mywebsite.com/item2.html</a> <br>Available Sizes:XS,S,M,L,XL,2XL <br>------------------------------------------------------------------------------------<br> </body> </html>

解決方案2
 1  2020-04-19 01:01:39

您確實需要在 HTML 內聯樣式編寫之外開始使用 CSS 等等。 在這里閱讀為什么內聯轉換對您不起作用： CSS 轉換對內聯元素不起作用

 <div id="demo"> <strong>1)Item 1</strong><br> <div style="text-align: right;">70<br> </div> <div style="position: relative; z-index: 1;"></div> <img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/8e2d81eb3e854642b5dca97600fd73c7_9366/Firebird_Track_Pants_Black_ED6897_25_model.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"> <span id="overlay_text" style=" transform: rotate(270deg); position: absolute; top: +90px; z-index: 3; background-color:white; line-height:50px"> SOLD OUT </span> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br> <a href="https://www.mywebsite.com/item1.html">https://www.mywebsite.com/item1.html</a> <br>Available Sizes:XS,S,M,L,XL,2XL <br>------------------------------------------------------------------------------------<br> <strong>2)Item 2</strong><br> <div style="text-align: right;">65<br> </div> <div style="position: relative; z-index: 1;"></div> <img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/bf500e3fd9c74e458cf4aaf00125990a_9366/Firebird_Track_Pants_Blue_FM3813_01_laydown.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"> <span id="overlay_text" style="position: relative; top: -10px; z-index: 3;background-color:white;line-height:50px"></span> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br> <a href="https://www.mywebsite.com/item2.html">https://www.mywebsite.com/item2.html</a> <br>Available Sizes:XS,S,M,L,XL,2XL <br>------------------------------------------------

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何將文本作為疊加層放置在垂直對齊到div左上角的圖像上 如何從圖像疊加中垂直居中文本 如何使用JQuery在圖像上放置疊加層？ 如何在圖像上放置文本？ 如何在圖像上垂直對齊文本 將文字跨過圖片 如何在文本中垂直居中<span>？</span> 如何將彈出窗口放在疊加層上 如何在瀏覽器中的圖像上放置文本到圖像的具體位置 如何在文本中間垂直放置文本？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM