Question

编辑：修正了，我很蠢。这是因为h1低于div。

所以我正在为一个学校项目制作一些网页，并且我一直在遇到这个烦人的问题，我正试图在页面上创建一个图像库，其中有多个缩略图都在页面上的有序类别中。例如因为它是视频游戏主题，它应该像英雄和地图。问题是当我放置一个图像时，图像会将屏幕顶部的文本推到它下面，这可能是一个非常简单的解决方案，只需要一些帮助。谢谢。 here is the link

CSS：

@font-face {
    font-family: bigNoodle;
    src: url(Font/big_noodle_titling_oblique.ttf);
}

#splash {

    z-index: 100;
    position: absolute;
    background: white url('Pictures/logo.png') center no-repeat;
    top: 0; 
    right: 0; 
    left: 0; 
    bottom: 0;
    font-family: bigNoodle;
    color: #939393;
    padding: 10px;
    font-size: 40px;


}

body {
    background: url('Pictures/bg.jpg') center fixed no-repeat;

}

h1 {
    z-index: 1;
    font-family: bigNoodle;
    text-align: center;
    text-transform: uppercase;
    font-size: 60px;
    color: #F99E1A;
    padding-top: 10px;
    margin: 0;
    padding: 0;

}

div.picture img {

    height: 200px;



}

HTML：

    <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type='text/javascript' src='anim.js'></script>
    <title>Wiki</title>
    <link rel="icon" type="image/x-icon" href="Pictures/logo.png" />
</head>
<body>
    <div id="splash">Click to continue...</div>

<div class="picture">
    <img src="Pictures/Heroes.jpg">
</div>

<h1>Welcome</h1>
</body>
</html>

Answer 1

你可以通过多种方式实现它

方式1：

您可以为文字

应用z-index

例如文字'welcome'在h1里面

double d = double.Parse(input);
// to represent it as the desired string again use
string output = d.ToString("00.000");

方式2：把你的形象作为div的背景

https://jsfiddle.net/ogyk1914/

CSS图像div的定位

1 个答案: