我想创建与此类似的叠加层 check, select a concept
下面是片段
<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-sm-4 img-holder ">
<img src="http://foundry.mediumra.re/img/chooser/agency-2.png" class="img-thumbnail imge" alt="agency-2" width="400" height="300">
</div>
</body>
</html>`
最佳答案
像这样将文本的背景设置为 css:
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.26)),url(<image_path>));
在这里你可以改变rgba的alpha值来相应地改变黑色阴影和背景图像路径。
因为我在线性渐变中传递了两个值 rgba，所以保持它们相同。如果你想要统一的背景。
这是您的工作代码。
<html lang="en">
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Jua" rel="stylesheet">
<style>
.img-holder{
background-image: url(http://foundry.mediumra.re/img/chooser/agency-2.png);
background-repeat: no-repeat;
width: 500px;
height: 300px;
}
.img-holder:hover{
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)), url(http://foundry.mediumra.re/img/chooser/agency-2.png);
}
.img-holder p{ color:white;
font-family: 'Jua', sans-serif;
text-align: center;
padding-top: 150px;
font-size: 0px;
transition-duration: .1s;
}
.img-holder:hover p{
font-size: 50px;
}
</style>
</head>
<body>
<div class="col-sm-4 img-holder ">
<p>I am Rajat</p>
</div>
</body>
</html>关于html - 如何在上面有文字的图像上创建深色透明叠加层，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50771501/