Question

我正在尝试将图片放在我的视频上方，但它不会显示，只有左侧的小标记？我知道这可能很简单，但我不明白。也许可以为css添加一些内容并更改代码所在的位置？

<!DOCTYPE html>

<HEAD>
<TITLE>    </TITLE>

<LINK href="to.css" rel="stylesheet" type="text/css">

</HEAD>

<BODY>
<div id="header">
<img src="/images/logo2.png" >
<div id="nav">
    <div id="nav_wrapper">
        <ul>
            <li><a href="#">HOME</a>

            </li>
            </li>
            <li> <a href="#">dropdown #1</a>

                <ul>
                    <li><a href="#">dropdown #1 item #1</a>

                    </li>
                    <li><a href="#">dropdown #1 item #2</a>

                    </li>
                    <li><a href="#">dropdown #1 item #3</a>

                    </li>
                </ul>
            </li>
            <li> <a href="#">dropdown #2</a>

                <ul>
                    <li><a href="#">dropdown #2 item #1</a>

                    </li>
                    <li><a href="#">dropdown #2 item #2</a>

                    </li>
                    <li><a href="#">dropdown #2 item #3</a>

                    </li>
                </ul>
            </li>
            </li>
        </ul>
    </div>
    <!-- Nav wrapper end -->
</div>
</div>
</div>
<div id="wrapper">
<div id="content_area">
<p></p>
</div>
</div>
<DIV ID="footer">Hello and Welcome --------------</DIV>

<center>
<video width="900" height="550" controls >
<source src="fifa.mp4" type="video/mp4">
<source src="fifa.ogg" type="video/ogg">
<source src="fifa.webm" type="video/webm">
<object data="fifa.mp4" width="320" height="240">
<embed src="fifa.swf" width="320" height="240">
</object> 
</video>
</center>

</BODY>

</HTML>

CSS:

body {
margin:0;
padding:0;
min-width:525px;
font-family: Arial;
font-size: 17px;
background-image:url('fifa2.jpg');
}

#header {
float: left;
width: 100%;
height: 100px;
position: absolute;
}

#footer {
float: left;
width: 100%;
background-color: #000000;
font-size: 14pt;
font-weight: bold;
text-align: center;
position: absolute;
height: 40px;
left: 0px;
bottom: 0px;
}

#wrapper {
padding-left: 200px;
padding-right: 125px;
overflow: hidden;
}

#left_side {
position: relative;
float: left;
width: 200px;
right: 200px;
margin-left: -100%;
padding-bottom: 2000px;
margin-bottom: -2000px;
}

#right_side {
position: relative;
float: left;
width: 125px;
background-color: #66CCCC;
margin-right: -125px;
padding-bottom: 2000px;
margin-bottom: -2000px;
}

#content_area {
position: relative;
float: left;
width: 100%;
padding-bottom: 2000px;
margin-bottom: -2000px;
}


#nav {
background-color: #222;
}
#nav_wrapper {
width: 335px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}


video {
margin-top: 250px;
}


![My page][1]




Link to image: [1]: http://i.stack.imgur.com/AARLw.jpg

Answer 1

检查图像的路径。几乎总是，当你看到小方块但没有出现图像时，路径是错误的。右键单击正方形，单击属性。确保您的路径（相对于HTML文件的位置）是正确的“区分大小写”。顺便说一句，如果文件是必须匹配的“.PNG”，那么你将不得不使用“logo2.PNG”代替“logo2.png”。验证这一切。

Answer 2

将css位置表单图像和视频元素设置为：

img{
   position:absolute;
}

video{
   position:relative;
}

Answer 3

尝试从

更改图像路径

<img src="/images/logo2.png" >

到

<img src="images/logo2.png" >

Html和css试图放置图像

3 个答案: