css在图像上显示按钮

我正在制作一个简单的reactjs应用程序，我需要在图像上放置button。我的HTML看起来像：css在图像上显示按钮

<div className={"panel-body"}> 
    <img className={"img-responsive center-block"} 
     src={album.photos.data[0].source} /> 
    {(this.state.isMouseInsideID === album.id) ? <button>Your Button</button> : null} 
</div>

它除了按钮无一不精显示在图像的下方。但我想在图像上或中间显示按钮div

我该如何做这项工作？

来源

2016-03-01 gamer

使用CSS，相对或绝对位置，你想要的按钮，它 –

作为@JaromandaX提到的，设置一个相对/绝对具有正确的z-index，应该做这个我试过'.mynew-BTN { 位置工作 –

make button position relative并使用z-index:也许它会对你有所帮助。

来源

2016-03-01 05:40:29

：绝对; z-index：10; margin-top：10px; – gamer

'.mynew-btn {position：absolute; left：50％; top：50％; margin-left：-50px; margin-top：-50px; z-index：10;}'试试这个。 https://jsfiddle.net/hamzanisar/33yt3b21/ –

使用z索引性质

CSS中的z索引属性控制重叠元素的垂直堆叠顺序。就像在哪一个，看起来好像在物理上更接近你。 z-index只对值的元素具有非静态值（默认值）。注意：z-index只能在定位元素（position：absolute，position：relative或position：fixed）上有效。

img { 
position: absolute; 
left: 0px; 
top: 0px; 
z-index: 10; 
}

来源

2016-03-01 05:46:31 Greg

有没有什么办法我可以风格的按钮来实现这一目标？ – gamer

如果添加.button {position：absolute; z-index：10; }？它不起作用？ – Greg

它在图像.. z索引有效后出现，但按钮出现在图像'后面。mynew-btn位置：绝对; z-index：10; margin-top：10px; }' – gamer

如果要居中的DIV按钮，同时有一个背景图像的DIV。我会建议，为div分配一个背景图像，而不是插入图像到div中。退房小提琴：

http://jsfiddle.net/49s505sa/1/

HTML：

<div id="wrapper"> 
<button type="button">Your Button</button> 
</div>

CSS：

#wrapper { 
width: 100%; 
height: 400px; 
border: 1px solid black; 
background: url('http://placehold.it/350x150') /*assign image, for demo purposes */ 
} 

button { 
height: 20px; 
position: relative; 
margin: -20px -50px; 
width: 100px; 
top: 50%; 
left: 50%; 
}

所以，里面的渲染方法

var style = { 
    backgroundImage: 'url(' + album.photos.data[0].source+ ')' 
} 
<div className={"panel-body"} style={style}> 
    {(this.state.isMouseInsideID === album.id) ? <button>Your Button</button> : null} 
</div>

这样，我们将动态分配图像到特定的div。而且不必太担心造型。

希望有帮助！

来源

2016-03-01 05:57:49

为什么你在CSS中使用'backgroud'？ – gamer

这只是为了向你展示一个例子。你可以从CSS中删除它。我从小提琴中解脱出来解释。 –

css在图像上显示按钮

回答

相关问题