在图像上的Html按钮

时间:2017-01-21 09:42:31

标签: html twitter-bootstrap

如何使按钮或链接保持在图像顶部?请参见下图中的红色椭圆。

我从carousel获得了这张图片并调整了这种风格。

<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    width: 100%;
    margin: auto;
}
</style>

我使宽度= 100%,因此按钮现在位于图像上而不是外面。

enter image description here

3 个答案:

答案 0 :(得分:1)

如果你想要这样的话 网站点有非常好的和简单的文章,用标题回答你的问题。

如何使用HTML,CSS和jQuery制作简单的图像滑块

请遵循此link

希望此链接对您有所帮助

答案 1 :(得分:1)

<html>
    <head>
        <script language="JavaScript">
	    function getTimeDifference() {
                var timeArray = [
		                    {
				        action: "start",
					time: 100,
				    },
				    {
					action: "stop",
					time: 150
				    },
				    {
					action: "start",
					time: 250
				    },
				    {
					action: "stop",
					time: 350
				    },
				    {
					action: "start",
					time: 100,
				    }
				];
	        var size = timeArray.length;
	        var timeDiff = 0;
		if(timeArray[size-1].action == 'start') {
		    // timeDiff = this.time - new Date().now();
		}
		else {
		    var startTime = 0;
		    var endTime = 0;				
		    for(var i=0; i<size; i++) {								
			if(timeArray[i].action == 'start')
			    startTime = startTime + timeArray[i].time;
			else if(timeArray[i].action == 'stop')
			    endTime = endTime + timeArray[i].time;					
		    }
		    timeDiff = endTime - startTime;
		}
		alert(timeDiff);
	    }
	</script>
    </head>
    <body>
	<input type="button" onclick="getTimeDifference()"/>
    </body>
</html>

答案 2 :(得分:1)

您需要对css文件中的按钮或链接使用position:absolute。