如何使用 html css 在背景图像上添加徽标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33331288/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add logo on background image using html css
提问by user2014
I want to put a logo on background image please guide me how to do it
我想在背景图片上放一个标志，请指导我怎么做
body {
background: url("../graphics/homepage-image.jpg") no-repeat top left;
background-size: cover;
clear: both;
padding: 0px;
margin: 0px;
}
.logo {
background: url("../graphics/dhaka logo.png");
padding: 0px;
margin: 0px;
width: 150px;
height: 50px;
}<body>
<div class="logo">
</div>
<nav>
<ul>
<li>
<a href=""></a>Login</li>
<li>
<a href=""></a>Sign up</li>
<li>
<a href=""></a>Contact us</li>
<li>
<a href=""></a>Feedback</li>
<li>
<a href=""></a> About us </li>
<li>
<a href=""></a> Home</li>
</ul>
</nav>
<div id="footer">
<p>© Copyrights Dhaka Bangladesh 2015</p>
</div>
</body>回答by gyosko
Put the logo in a div
将徽标放在 div 中
<div id="my_logo"></div>
And then style it:
然后设置样式：
#my_logo{
background: url"../graphics/dhaka logo.png");
width : your_logo_width;
height : your_logo_height;
}
body{
background: url("../graphics/homepage-image.jpg") no-repeat top left;
overflow: hidden;
background-size:cover;
clear:both;
padding:0px;
margin:0px;
}
回答by imGaurav
body{
background: url('http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png') no-repeat;
width: 200px;
height: 200px;
background-attachment: fixed;
background-position: center;
padding: 0;
margin: 0;
}<body></body>.logo {
background-image: url('http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png');
width: 200px;
height: 200px;
display: inline-block;
}<div class="logo"></div>回答by kfreeman04208
Try this out
试试这个
<!doctype html>
<head>
<style>
body {
background: url("../graphics/homepage-image.jpg") no-repeat top left;
background-size:cover;
clear:both;
padding:0px;
margin:0px;
}
.logo {
background-image: url('../graphics/dhaka logo.png');
padding:0px;
margin:0px;
width:150px;
height:50px;
}
</style>
</head>
<body>
<ul>
<li><a href=""></a>Login</li>
<li><a href=""></a>Sign up</li>
<li><a href=""></a>Contact us</li>
<li><a href=""></a>Feedback</li>
<li><a href=""></a> About us </li>
<li><a href=""></a> Home</li>
</ul>
<div class="logo">
</div>
<div id="footer">
<p>© Copyrights Dhaka Bangladesh 2015</p>
</div>
</body>
</html>
回答by Hassan Siddiqui
Just add background-repeat: no-repeat;and background-size: cover;in logoCSS.
只需在CSS 中添加background-repeat: no-repeat;和。background-size: cover;logo
.logo {
background-image: url("../graphics/dhaka logo.png");
background-repeat: no-repeat;
background-size: cover;
padding: 0px;
margin: 0px;
width: 150px;
height: 50px;
}
Avoid spaces in file/image name like
dhaka logo.pngyou can replace space with%20likedhaka%20logo.png. But i would suggest to change your image namedhaka-logo.png.
避免文件/图像名称中的空格，就像
dhaka logo.png您可以用%20like替换空格一样dhaka%20logo.png。但我建议更改您的图像名称dhaka-logo.png。
You can see the W3C Specfor the full requirements.
您可以查看W3C 规范以了解完整要求。
body {
background: url("../graphics/homepage-image.jpg") no-repeat top left;
background-size: cover;
clear: both;
padding: 0px;
margin: 0px;
}
.logo {
background-image: url("../graphics/dhaka logo.png");
background-repeat: no-repeat;
background-size: cover;
padding: 0px;
margin: 0px;
width: 150px;
height: 50px;
}<body>
<div class="logo"></div>
<nav>
<ul>
<li><a href=""></a>Login</li>
<li><a href=""></a>Sign up</li>
<li><a href=""></a>Contact us</li>
<li><a href=""></a>Feedback</li>
<li><a href=""></a> About us </li>
<li><a href=""></a> Home</li>
</ul>
</nav>
<div id="footer">
<p>© Copyrights Dhaka Bangladesh 2015</p>
</div>
</body>