使用反應內聯樣式將圖像疊加在彼此相鄰的圖像上

我已經列出了一組相等大小的圖像，每個圖像以百分比寬度縮放。我對此非常陌生，希望能夠幫助您弄清楚如何在每張圖片上添加文字。使用反應內聯樣式將圖像疊加在彼此相鄰的圖像上

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>

來源

2017-06-05 Chris

你可以參考https://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css – Jin

我沒有仔細看你的CSS，但我最初的想法當我讀到你想要做的就是使用position：relative和position：absolute的組合來放置圖像上方的文本。 – wmock

我創建一個例子給你：

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/

來源

2017-06-05 04:18:40

謝謝你，設法得到這個工作 – Chris

使用反應內聯樣式將圖像疊加在彼此相鄰的圖像上

回答

相關問題