使用反应内联样式在彼此相邻的图像上添加文本

Question

我将一组大小相同的图片并排排列，并按百分比宽度缩放。我对此还很陌生，希望能得到一些帮助，弄清楚现在如何在每张图片上添加文本。

const style1 = {  
  display: 'block'  
}

const style2 = {
  float: "center",  
  fontSize: '9pt',  
  textAlign: 'center',  
  width: '30%',  
  marginRight: '1.6666665%',  
  marginLeft: '1.6666665%',  
  marginTop: '1%',  
  marginBottom: '0.5em',  
}

<div style={style1}>
  <a href="" className="icons"><img style={style2} src="https://ucarecdn.com/182bd14b-648e-478f-a4dc-b885a489a543/-/crop/3456x3456/864,0/-/resize/500x500/"/></a>
  <a href="" className="icons"><img style={style2} src="https://ucarecdn.com/209579d4-2c4e-4422-b633-5b23edd7bc99/-/crop/1600x1600/480,0/-/resize/500x500/"/></a>
  <a href="" className="icons"><img style={style2} src="https://ucarecdn.com/a7d04a85-431e-401f-b534-de23dd6442f7/-/crop/2304x2304/576,0/-/resize/500x500/"/></a>
</div>

Answer 1

我为您创建一个示例：

HTML :

<div class="image">
  <img src="http://lorempixel.com/400/400/sports/2" alt="" />      
  <h2><span>Some Text</span></h2></div><br/>
</div>

<div class="image">
  <img src="http://lorempixel.com/400/400/food/5" alt="" />      
  <h2><span>Some Other Text</span></h2></div><br/>
</div>

CSS :

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
  position: absolute; 
  top: 300px; 
  left: 0; 
  width: 100%; 
}

h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.4);
   padding: 10px; 
}

https://jsfiddle.net/emilvr/f03m3Lks/1/

使用反应内联样式在彼此相邻的图像上添加文本

Add text over images next to each other with react inline styles

html

css

text

inline-styles

reactjs