61,110
社区成员
发帖
与我相关
我的任务
分享
.c-background
{
height: 768px;
background-image: url('./img/contact.jpg');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
.c-cover
{
height: 768px;
background-color: rgba(255,255,255,0.5);
padding-top: 50px;
}
.container
{
width: 80%;
height: 80%;
border: 2px outset blue;
box-shadow: 1px 1px 1px rgba(192,192,192,0.6);
}
.c-showpic
{
position: relative;
width: 400px;
height: 350px;
margin-top: 150px;
border: 1px outset rgba(0,0,0,0.4);
box-shadow: 1px 1px 1px rgba(0,0,0,0.8);
}
.pic-cover
{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
opacity: 0;
}
img
{
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="gallery.css">
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</head>
<body>
<div class="c-background">
<div class="c-cover">
<div class="container">
<div class="row">
<div class="col-lg-6 ">
<div class="c-showpic ">
<div class="pic-cover"></div>
<img src="./img/gallery/pic1.jpg" alt="Gallery" >
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>