我目前正在学习html和CSS。我正在练习制作一个非常基本的网站,但当我在背景图片( twitter徽标)上添加另一张图片时,我遇到了一个问题。我试着用style="top:-90px;"移动图像,但是没有效果。不管我用什么类来移动图像,什么都没有发生。我也不知道如何通过CSS定位图像。
请帮帮忙,对不起,我知道得很少,因为我在努力学习。
<!DOCTYPE html>
<head>
<style>
body {
text-align: center;
background: url("LINK");
background-size: cover;
color: white;
font-family: sans-serif;
background-repeat: no-repeat;
background-attachment: fixed;
font-weight: lighter;
}
p {
text-align: center;
font-size: 24px;
font-family: sans-serif;
}
</style>
</head>
<body>
<a href="http://www.google.com"><img src="http://www.scottish.parliament.uk/images/Logos%20and%20graphics/TwitterLogoSmall20120927.gif" height="50" width="50" style="top:-90px;"></a>
<p>Hello!</p>
</body>发布于 2014-04-09 15:30:57
top不使用position:static (默认)对元素做任何操作。您应该将position设置为:
position:relative将图像向上移动90像素position:absolute移动图像,因此其顶部边缘比偏移容器的顶部边缘高出90像素(本例中为<body>)。position:fixed将图像移动到高于视觉端口顶部90像素的位置。在你这种情况下,我敢肯定你想要position:relative
发布于 2014-04-09 15:31:10
top与position: absolute一起工作。
也许你想
margin-top: value;发布于 2014-04-09 15:43:29
如果您是html和css新手,那么我建议将您的图像和链接放在
<a href="xyz"><img src="xyz"/></a>
在div内部(如果您不使用html5),如下所示
<div id="myImage">
<a href="xyz"><img src="xyz"/></a>
</div>
然后在css中使用
#myImage {
position:relative;
top:-90px
https://stackoverflow.com/questions/22967249
复制相似问题