Question

我正在使用https://cornel.bopp-art.com/lightcase/网站上的自定义脚本。我已经在我的网站上正确实现了，问题是我试图在图像下放置一个按钮。现在有一个带有文本的“ alt”。如何在此处插入按钮？我已经尝试了很多东西，但是没有一个正在工作。这是一张显示外观的图像，我想要做的是设置一个按钮，显示“冷却”

  <div class="col-md-4 col-sm-6 fashion photography " >                                     
                                <a href="img/tshirt.jpg" data-rel="lightcase"class="portfolio_item" >                                                  
                                    <img src="img/men.jpeg" alt="this t-shirt is awesome" class="img-responsive">                                                                          
                                    <div class="portfolio_item_hover">
                                        <div class="portfolio-border clearfix">
                                            <div class="item_info"> <span>Men Tennis Style </span> <em>Fashion</em> 
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>

Answer 1

您可以使用它在图像上定位按钮。

<!DOCTYPE html>
<html>
<head>
    <title>prasad</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
	<style>
		.photography {
		  position: relative;
		  width: 100%;
		  max-width: 400px;
		}
		.photography img {
		  width: 100%;
		  height: auto;
		}
		.photography .btn {
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  -ms-transform: translate(-50%, -50%);
		  background-color: #884992;
		  color: white;
		  font-size: 16px;
		  padding: 12px 24px;
		  border: none;
		  cursor: pointer;
		  border-radius: 5px;
		  text-align: center;
		}
		.photography .btn:hover {
		  background-color: black;
		}
	</style>
</head>
<body>
	<div class="col-md-4 col-sm-6 fashion photography container">
		<a href="https://img.romwe.com/images/romwe.com/201701/1483596883558198680_thumbnail_800x.webp" data-rel="lightcase"class="portfolio_item" >                                                  
			<img src="https://img.romwe.com/images/romwe.com/201701/1483596883558198680_thumbnail_800x.webp" alt="this t-shirt is awesome" class="img-responsive">                         
			<button class="btn">Cool down</button>
			<div class="portfolio_item_hover">
	            <div class="portfolio-border clearfix">
	                <div class="item_info"><span>Men Tennis Style </span> <em>Fashion</em></div>
	            </div>
	        </div>
	    </a>
	</div>
</body>
</html>

在图像下方设置按钮

1 个答案: