我有这种情况:
我希望那部分文字也占据了红色圈出的区域。有可能的？ 图片和文字的代码为:
<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透明图片。 谢谢!
最佳答案
最简单的方法是将内容分成两部分 <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>关于html - 部分文字覆盖图片html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48043606/