时间戳

首页 > 解决方案 > 在背景图像顶部添加徽标

html - 在背景图像顶部添加徽标

问题描述

我正在努力在模板网站上的背景上添加徽标。徽标要么位于背景图像之间，要么根本不出现。

<!doctype html>
<html>

  <head>
    <title> Group Coursework </title>
    <link REL="StyleSheet" TYPE="text/css" HREF="example.css">
    
    <style>
    	body,
	html {
	  height: 100%;
	}

	* {
	  box-sizing: border-box;
	}

	.bg-image {
	  /* Full height */
	  height: 100%;
	  /* Center and scale the image nicely */
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-attachment: fixed;
	}

	/* Images used */

	.img1 {
	  background-image: url("https://images3.alphacoders.com/914/thumb-1920-914671.png");
	  filter: blur(4px);
	  -webkit-filter: blur(4px);
	}

	.img2 {
	  background-image: url("https://hdwallpapersmafia.com/wp-content/uploads/2018/11/baby-groot-playing-basketball-lk-3840x2160-1.jpg");
	}

	/* Center and scale the image nicely */

	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	}

	.header {
	  width: 100%;
	  height: 100%;
	}

	.navbar {
	  width: 100%;
	  padding: 20px;
	  position: fixed;
	  top: 0px;
	  text-align: center;
	  transition: .5s;
	}

	.navbar ul li {
	  list-style-type: none;
	  display: inline-block;
	  padding: 10px 50px;
	  color: white;
	  font-size: 32px;
	  font-family: cursive;
	  cursor: pointer;
	  border-radius: 10px;
	  transition: .5s;
	}

	li a,
	.dropbtn {
	  display: inline-block;
	  color: white;
	  text-align: center;
	  padding: 14px 16px;
	  text-decoration: none;
	}

	.dropdown-content {
	  display: none;
	  position: absolute;
	  background-color: #f9f9f9;
	  min-width: 160px;
	  box-shadow: 0px 8px 16px 0px rbga (0, 0, 0, 0.5);
	  z-index: 1;
	}

	.dropdown-content a {
	  color: black;
	  padding: 12px 16px;
	  text-decoration: none;
	  display: block;
	  text-align: left;
	}

	.dropdown-content a:hover {
	  background-color: grey;
	}

	.dropdown:hover .dropdown-content {
	  display: block;
	}

	.logo {
	  position: relative;
	}

	.logo:after {
	  content: "";
	  display: block;
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  top: 15%;
	  left: 50%;
	  background-image: url("https://www.pngkey.com/png/detail/44-447166_cavalier-logo-with-sword-and-flag-cleveland-cavaliers.png");
	  background-size: 100px 100px;
	  background-position: 30px 30px;
	  background-repeat: no-repeat;
	  opacity: 0.7;
	}

    
    
    </style>
  </head>

  <body>


    <div class="bg-image img1"></div>
    <div class="logo"></div>
    <div class="bg-image img2"></div>
    <div class="header">


      <div class="navbar" id='nav'>

        <ul>
          <li><a href="http://google.co.uk">Home</a></li>
          <li><a href="http://standard.co.uk">News</a></li>
          <li><a href="mailto:">Contact</a></li>
          <li><a href="tutorial3.html">About</a></li>
          <li class="dropdown">
            <a href="javascript.void(0)" class="dropbtn">Sports Websites</a>
            <div class="dropdown-content">
              <a href="https://www.nba.com">NBA</a>
              <a href="https://www.nfl.com">NFL</a>
              <li><a href="reviews.html" onclick="javascript:void window.open('reviews.html','1552802326220','width=1200,height=500');return false;">Reviews</a></li>
            </div>

        </ul>
      </div>
    </div>

  </body>
  <script src="javascript.js"></script>

</html>

我将其全部保存到 html，因为如果分隔为 html / css，它会显示错误。我要做的就是让徽标显示在顶部 15% 和中心 5​​0% 上。任何可能有帮助的建议？

标签： htmlcss

解决方案

您需要从中移除position: relative，.logo因为它被现有背景遮挡，而现有背景存在于更高的堆叠上下文中。删除相对定位后，absolute伪内容可以在正确的上下文中创建提升其堆叠顺序。

此外，为了.logo更好地居中，您不能只放置它left: 50%。您需要占背景图像大小宽度的一半，即100px / 2或50px。

因此，left值变为：

left: calc(50% - 50px);

演示

<!doctype html>
<html>

  <head>
    <title> Group Coursework </title>
    <link REL="StyleSheet" TYPE="text/css" HREF="example.css">
    
    <style>
    	body,
	html {
	  height: 100%;
	}

	* {
	  box-sizing: border-box;
	}

	.bg-image {
	  /* Full height */
	  height: 100%;
	  /* Center and scale the image nicely */
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-attachment: fixed;
	}

	/* Images used */

	.img1 {
	  background-image: url("https://images3.alphacoders.com/914/thumb-1920-914671.png");
	  filter: blur(4px);
	  -webkit-filter: blur(4px);
	}

	.img2 {
	  background-image: url("https://hdwallpapersmafia.com/wp-content/uploads/2018/11/baby-groot-playing-basketball-lk-3840x2160-1.jpg");
	}

	/* Center and scale the image nicely */

	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	}

	.header {
	  width: 100%;
	  height: 100%;
	}

	.navbar {
	  width: 100%;
	  padding: 20px;
	  position: fixed;
	  top: 0px;
	  text-align: center;
	  transition: .5s;
	}

	.navbar ul li {
	  list-style-type: none;
	  display: inline-block;
	  padding: 10px 50px;
	  color: white;
	  font-size: 32px;
	  font-family: cursive;
	  cursor: pointer;
	  border-radius: 10px;
	  transition: .5s;
	}

	li a,
	.dropbtn {
	  display: inline-block;
	  color: white;
	  text-align: center;
	  padding: 14px 16px;
	  text-decoration: none;
	}

	.dropdown-content {
	  display: none;
	  position: absolute;
	  background-color: #f9f9f9;
	  min-width: 160px;
	  box-shadow: 0px 8px 16px 0px rbga (0, 0, 0, 0.5);
	  z-index: 1;
	}

	.dropdown-content a {
	  color: black;
	  padding: 12px 16px;
	  text-decoration: none;
	  display: block;
	  text-align: left;
	}

	.dropdown-content a:hover {
	  background-color: grey;
	}

	.dropdown:hover .dropdown-content {
	  display: block;
	}

	.logo:after {
	  content: "";
	  display: block;
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  top: 15%;
	  left: calc(50% - 50px);
	  background-image: url("https://www.pngkey.com/png/detail/44-447166_cavalier-logo-with-sword-and-flag-cleveland-cavaliers.png");
	  background-size: 100px 100px;
	  background-position: 30px 30px;
	  background-repeat: no-repeat;
	  opacity: 0.7;
	}

    
    
    </style>
  </head>

  <body>

    <div class="bg-image img1"></div>
    <div class="logo"></div>
    <div class="bg-image img2"></div>
    <div class="header">


      <div class="navbar" id='nav'>

        <ul>
          <li><a href="http://google.co.uk">Home</a></li>
          <li><a href="http://standard.co.uk">News</a></li>
          <li><a href="mailto:">Contact</a></li>
          <li><a href="tutorial3.html">About</a></li>
          <li class="dropdown">
            <a href="javascript.void(0)" class="dropbtn">Sports Websites</a>
            <div class="dropdown-content">
              <a href="https://www.nba.com">NBA</a>
              <a href="https://www.nfl.com">NFL</a>
              <li><a href="reviews.html" onclick="javascript:void window.open('reviews.html','1552802326220','width=1200,height=500');return false;">Reviews</a></li>
            </div>

        </ul>
      </div>
    </div>

  </body>
  <script src="javascript.js"></script>

</html>

推荐阅读