Html 将徽标图像添加到页面背景的右上角
我正在尝试添加一个图像“logo.png”到页面右上角的背景中。我用css来做这件事，没有别的。。。以下是我所拥有的：Html 将徽标图像添加到页面背景的右上角,html,css,Html,Css,我正在尝试添加一个图像“logo.png”到页面右上角的背景中。我用css来做这件事，没有别的。。。以下是我所拥有的： body { background-image: url('logo.png'); background-repeat: no-repeat; background-attachment: fixed; background-position: right top; background-color: #E6E6E6; font-family: Aria
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;
}
我不确定我做错了什么，因为没有图像出现为徽标做一个单独的div，然后进行实验。从技术上讲，你应该通过反复试验来解决这个问题。在google chrom上加载您的页面，右键单击>inspect元素，您将有一个类似于控制台的条形图，其中将显示srouce代码。在您的左边找到您正在使用的div，并向其中添加各种元素 试试这个： 将您的徽标放在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 */
}
检查logo.png所在的文件路径。它是否与您的网页处于同一级别 这是一把有效的小提琴。我真的看不出你的代码有任何问题 代码中唯一的更改是指向虚拟徽标图像的链接
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;
}
Evan，使用CSS你需要创建构建块。就像你在一张纸上画一样，你需要告诉CSS它需要把元素放在哪里。听起来很简单，但是如果你看不到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;
}
HTML
//对CSS背景img插入使用div标记
//等
CSS
身体{
//宽度和高度在父元素中很重要。没有它，CSS只会崩溃
//回到空白纸的类比。如果你不告诉CSS纸的尺寸
//它将假定为零，并根据您创建的元素开始构建文档维度
宽度：1000px；//或使用100%或
最小高度：2000px；
//…其他车身造型
}
//我喜欢使用包装，因为我可以将所有与品牌相关的东西放入包装中
//例如徽标、标语等。然后，我放置包装，然后将元素放在包装内
品牌集团部{
//我不喜欢静态或固定，因为你不能使用浮动等，但我明白为什么要这样做
//位置属性是必不可少的，因为你告诉CSS你想定位相对于其父标志的标志
//在这种情况下，它是主体（1000 x 2000）
职位：亲属；
浮动：对；
//或者，如果使用固定或静态，则使用此方法
//左：100%
//左边距：-215px；//添加15px右边沟
//如果您想推到顶部，可以使用top做类似的事情，但假设这是您的第一个html元素
宽度：200px；
高度：100px；//您没有生成组大小
顶部：边缘：15px；
}
部门品牌标识{
//使用更少的或SASS（因为您有功能）更容易定位徽标
//在纯CSS中，将徽标居中的最简单方法是查看图像的尺寸
//假设它是100px 50px
左：50%；
左边距：-50px；//图像宽度的一半
最高：50%；
页边距顶部：-25px；//半高
背景图片：url（'logo.png'）；
背景重复：无重复；
背景色：#e6；
字体系列：Arial；
字号：中等；
}
。//