Question

我想在背景图片上添加徽标，请指导我如何操作

＆＃13;

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;
}

＆＃13;

<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>&copy; Copyrights Dhaka Bangladesh 2015</p>
  </div>
</body>

＆＃13;

Answer 1

将徽标放入div

<div id="my_logo"></div>

然后设计它：

#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;
}

Answer 2

＆＃13;

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;
    
}

＆＃13;

<body></body>

＆＃13;

.logo {
  background-image: url('http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png');
  width: 200px;
  height: 200px;
  display: inline-block;
}

＆＃13;

<div class="logo"></div>

＆＃13;

Answer 3

试试这个

<!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>&copy; Copyrights Dhaka Bangladesh 2015</p> 
      </div>
</body>
</html>

Answer 4

只需在background-repeat: no-repeat; CSS中添加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;
}

避免在文件/图像名称中使用空格，例如dhaka logo.png，您可以使用%20替换空格，例如dhaka%20logo.png 。但我建议更改您的图片名称dhaka-logo.png。

您可以看到W3C Spec的完整要求。

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>&copy; Copyrights Dhaka Bangladesh 2015</p>
  </div>
</body>

如何使用html css在背景图像上添加徽标

4 个答案: