图片HTML文字的一部分

卢卡卡特

我有这种情况：

我希望那部分文字也占据红色圈出的区域。有可能的？图片和文字的代码为：

<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透明图像。谢谢！

伊万86

最简单的方法是将内容分为两部分<div>s。底部<div>将溢出，因为它具有>100%父宽度的宽度。图像设置z-index为比更低的值z-index的overlapping div和文本会在图像上。

试试这个：

.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。