我正在努力在模板网站上的背景上方添加徽标。徽标位于背景图像之间，或者根本不显示。
<!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％和中心50％上。有什么建议可能会有所帮助吗？
答案 0 :(得分：0)
您需要从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>