如何在图像上叠加徽标？ 使用CSS
[英]How can I overlay logo over a image? using css
问题描述
如您所见，徽标显示在背景图像上方，但是我希望它位于背景图像的中心。
这是我的标题，背景需要从页面顶部开始，到菜单之前结束。 徽标需要显示在背景图片上方的中央。 我已经尝试了很多，但也许有人遇到了类似的问题，可以为我提供帮助。
这张图片显示多数民众赞成在其几乎工作，但其背后的背景
<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>
1 个解决方案
解决方案1
1 已采纳 2017-01-16 22:48:53
使用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将文本叠加到另一个上？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.