Question

我正在尝试添加图片＆＃34; logo.png＆＃34;到右上角定位的页面背景。我正在使用css来做这个而不是别的......这就是我所拥有的：

body {
  background-image: url('logo.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right top;
  background-color: #E6E6E6;
  font-family: Arial;
  font-size: medium;
}

我不确定我做错了什么，因为没有出现图片

Answer 1

为徽标创建一个单独的div，然后进行实验。从技术上讲，你应该通过反复试验弄明白。在google chrom上加载您的页面，右键单击＆gt;检查元素，您将拥有一个像bar这样的控制台，您可以在其中获得srouce代码。在您的左侧找到您正在使用的div并添加各种元素。

Answer 2

试试这个：

将您的徽标放在DIV中，并将其放在关闭身体标记之前。

.logo-div  {
Width: 150px; /* Adjust as needed */
height: 150px; /* Adjust as needed */
position: fixed;
right: 0; /* Adjust as needed */
top: 0; /* Adjust as needed */
z-index: 1; /* Adjust as needed */
}

Answer 3

检查logo.png所在的文件路径。它与您的网页处于同一级别吗？

这是一个有效的小提琴http://jsfiddle.net/z7d8kcLz/。我真的没有看到您的代码有任何问题

只有代码中的更改才是指向虚拟徽标图像的链接

 body {
    background-image: url('http://www.hessionphysicaltherapy.ie/wp-content/uploads/2010/11/dummy-logo1.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right top;
     background-color: #E6E6E6;
    font-family: Arial;
   font-size: medium;
 }

Answer 4

Evan，使用CSS你需要创建构建块。就像你在一张纸上画画一样，你需要告诉CSS需要放置元素的位置。听起来很简单，但鉴于3D和你没有看到3D它会让CSS变得痛苦。因此，我会在不同的html标签等中获取元素。

HTML
<body>
<div class="brand-group">
  //  use div tag for CSS background img insertions
  <div class="brand-logo"></div>
</div>
// etc

CSS
body{
 // width and height are important in the parent element. Without it CSS will just collapse 
 // going back to blank sheet of paper analogy. If you don't tell CSS the dimensions of the paper 
 // it will assume zero and start to build the document dimensions based on the elements you create
  width: 1000px; // or use 100% or 
  min-height: 2000px;

// ... other body styling
}

// I like to use a wrapper as I can then place everything brand related into the wrapper 
// e.g. logo, tagline, etc. I then position the wrapper and following that the elements within the wrapper 
div.brand-group {
  // I don't like static or fixed as you cannot use float, etc,, but I get why it is done
  // position attribute is essential as you telling CSS who you want to position the logo relative to its parent
  // in this case it is body (1000 x 2000)
  postion: relative;
  float: right;   
  // alternatively IF you use fixed or static then use this approach 
  // left: 100%
  // left-margin: -215px; // adding 15px right gutter 
  // you can do something similiar using top if you want to push to top, but lets assume this is your first html element 
  width: 200px;
  height: 100px; //you are not building the group size 
  top: margin: 15px;
}
div.brand-logo {
  // easier to position logos using LESS or SASS as you have functions
  // in pure CSS the easiest way to center the logo would be to look at the image dimensions'
  // lets say it is 100px x 50px
  left: 50%;
  margin-left: -50px; // half the width  of the image
  top: 50%;
  margin-top: - 25px; // half height  
  background-image: url('logo.png');
  background-repeat: no-repeat;
  background-color: #E6E6E6;
  font-family: Arial;
  font-size: medium;
}

在页面背景的右上角添加徽标图像

4 个答案: