文章/答案/技术大牛

发布

社区首页 >问答首页 >部分文本在图像html上

问部分文本在图像html上
EN

Stack Overflow用户

提问于 2017-12-31 15:17:20

回答 4查看 413关注 0票数 0

我有这样的情况：

https://imgur.com/a/dZCTO

我希望这部分文字也占据了用红色圈起来的区域。有可能吗？图像和文本的代码是：

<div class="row">
<div class="col-md-6">
<b>In tutte le varianti ITT si attiva grazie ai 
Tag.</b> Questa dotazione consente al sistema di rilevare la presenza di 
personale all’interno dell'area di pericolo dell'impianto ed evitare 
tutti i tipi di collisioni possibili. Nello specifico i macchinari 
possono essere dotati di un Tablet touch-screen che fornisce informazioni 
relative alla posizione dell’ostacolo rilevato rispetto al mezzo e alla 
sua direzione di marcia. In più la rilevazione di tutte le informazioni 
relative agli individui che sono entrati in contatto con la safety cloud 
(o area di pericolo) potranno essere registrate e rielaborate per 
migliorare il livello di sicurezza del reparto produttivo.</div>
<div class="col-md-6">
<img src="images/stories/Prodotti/ITT_Interactive_Tracking_Tags/itt_safety_securi
  ty/ITT_Factory_simulation.jpg" alt="itt map safety security" />
</div>
</div>

代码中的图像是jpg，但我可以制作一个png透明图像。谢谢!

css

text

html

回答 4

Stack Overflow用户

回答已采纳

发布于 2017-12-31 15:39:46

最简单的方法是将内容分成两个<div>s。底部<div>将溢出，因为它的宽度为>100%父级宽度。将图像z-index设置为比overlapping div的z-index值低的值，文本将遍历图像。

试试这个：

.topText
{
   position:relative;
   float:left;
   width:100%;
   margin:0;
   padding:0;
   color:#000;
   border:1px solid #09f;
}

.bottomText
{
   position:relative;
   float:left;
   width:150%;
   margin:0;
   padding:0;
   color:#000;
   border:1px solid #09f;
   overflow:visible;
   z-index:2;
}

div img
{
   z-index:1;
}

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
<div class="row">
  <div class="col-xs-12">
    <div class="col-xs-6">
    <div class="topText"><b>In tutte le varianti ITT si attiva grazie ai Tag.</b><p>Questa dotazione consente al sistema di rilevare la presenza di personale all’interno dell'area di pericolo dell'impianto ed evitare tutti i tipi di collisioni possibili. Nello specifico i macchinari possono essere dotati di un Tablet touch-screen che fornisce informazioni relative alla posizione dell’ostacolo rilevato rispetto al mezzo e alla sua direzione di marcia.</p>
    </div>
    <div class="bottomText">
        <p>In più la rilevazione di tutte le informazioni relative agli individui che sono entrati in contatto con la safety cloud (o area di pericolo) potranno essere registrate erielaborate per migliorare il livello di sicurezza del reparto produttivo..</p>
    </div>
  </div>
  <div class="col-xs-6">
    <img src="https://static.rogerebert.com/redactor_assets/pictures/rogers-journal/the-republicans-exit-history/_20_20_20consumer-thumb-280x310-37393.jpg" alt="Sample image" width="100%" height="auto" />
   <div>
  </div>
  </div>
</body>

</html>

票数 0

Stack Overflow用户

发布于 2017-12-31 15:19:57

我不这么认为，但我认为如果在希望文本放在下一行的地方添加<br>标记，它可能会工作。但是，如果图像是正方形，那么它可能无法工作，除非文本可以通过图像。

票数 0

Stack Overflow用户

发布于 2017-12-31 15:51:25

如果不需要响应，可以生成文本容器的position:absolute，并使用<br>在需要的地方拆分行。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48043606

复制

相似问题

问部分文本在图像html上
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问部分文本在图像html上EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问部分文本在图像html上
EN