如何将徽标覆盖在图像上?使用CSS [英] How can I overlay logo over a image? using css
本文介绍了如何将徽标覆盖在图像上?使用CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您可以看到徽标显示在背景图像上方，但是我希望它位于背景图像的中心.
As you can see the logo is displayed above the background-image, but i would like it to be in the center of the background image.
这是我的标题，背景需要从页面顶部开始，并在菜单之前结束.徽标需要显示在背景图片上方的中央.我已经尝试了很多，但是也许有人遇到了类似的问题，可以为我提供帮助.
this is my header and the background needs to begin on top of the page and end before the menu. the logo needs to be displayed in the center over the background image. i have tried a lot but maybe somebody had a similar problem and can help me with this.
这张图片显示多数民众赞成在几乎可以正常运作，但是在背景后面
this image show the thats its almost working but its behind the background
<html>
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=font1|font2|etc' type='text/css'>
<link rel="stylesheet" href="styles.css" type="text/css">
<script src="navbar.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!--bootstrap-->
<link rel="stylesheet" type="text/css" href="styles/css/bootstrap.css">
<script src="styles/js/bootstrap.min.js"></script>
<!--datepicker -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="styles/js/bootstrap.min.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<header>
<div id="theCarousel" class="carousel slide" data-ride="carousel">
<img class="logo" src="fts.png">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active">
</li>
<li data-target="#theCarousel" data-slide-to="1">
</li>
<li data-target="#theCarousel" data-slide-to="2">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="slide1">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item">
<div class="slide2">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item">
<div class="slide3">
<div class="carousel-caption">
</div>
</div>
</div></div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"> </span></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"> </span> </a>
</div>
</header>
<div id="cssmenu" class="align-right">
<ul>
<?php
switch ($_SESSION['isAdmin']) {
case "1":
echo '<li><a href="adminDash.php"><i class="fa fa-unlock"></i><span>AdminDash</span></a></li>' ;
break;
case "0":
break;
default:
break;
}
?>
<li><a href="index.php"><span>DASHBOARD</span><i class="fa fa-home"></i></a></li>
<li><a href="acties/nieuwTicketDash.php"><span><i class="fa fa-ticket"></i> NIEUW TICKET</span></a></li>
<li><a href="tickets.php"><span>ALLE TICKETS</span></a></li>
<li><a href="klanten.php"><span></i> KLANTEN</span></a></li>
<li class="active"><a href="acties/uitloggen.php"><span><i class="fa fa-sign-out"></i>UITLOGGEN</span></a></li>
</ul>
</div>
<br><br><br>
</body>
<style>
body {
background-color: #cdcdcd;
width: 100%;
margin: 0 auto;
}
img.logo {
height: 130px;
position: absolute;
margin: auto;
display: block;
top: 80px;
left: 0;
right: 0;
}
header{
width: 100%;
position: relative;
text-align: center;
}
/* Carousel Styling */
.carousel div[class^=slide] {
height: 100px;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
z-index: -1
}
.slide1{
background-image: url('styles/3.jpg');
}
.slide2{
background-image: url('styles/2.jpg');
}
.slide3{
background-image: url('styles/1.png');
}
</style>
</html>推荐答案
使用 position:relative/absolute
img.logo {
height: 90px;
position: absolute;
margin: auto;
display: block;
top: 80px;
left: 0;
right: 0;
}
header {
width: 100%;
position: relative;
text-align: center;
}
/* Carousel Styling */
.carousel div[class^=slide] {
height: 110px;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
z-index: -1
}
.slide1 {
background-image: url('//placehold.it/500');
}
.slide2 {
background-image: url('styles/2.jpg');
}
.slide3 {
background-image: url('styles/1.png');
}<header>
<div id="theCarousel" class="carousel slide" data-ride="carousel">
<img class="logo" src="//placehold.it/100/FF0">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active">
</li>
<li data-target="#theCarousel" data-slide-to="1">
</li>
<li data-target="#theCarousel" data-slide-to="2">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="slide1">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item">
<div class="slide2">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item">
<div class="slide3">
<div class="carousel-caption">
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"> </span>
</a>
<a class="right carousel-control" href="#theCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"> </span>
</a>
</div>
</header>这篇关于如何将徽标覆盖在图像上?使用CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
