网页代码中，用background把一个图片作为背景，在图片上插入一段优酷视频，这个视频的位置如何控制？

发布网友发布时间：2022-04-25 16:51

共5个回答

热心网友时间：2023-10-20 06:38

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body> 
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 1920px; /* 背景图尺寸 width为宽度 height为高度改对应数字即可*/
height: 790px;

border: solid 5px black; /* 边框黑色线不需要可以删除本行代码*/
position: relative;
background: url(https://img.alicdn.com/imgextra/i4/2271085369/O1CN01lWdg9e1pX32QMje1m_!!2271085369.jpg);
/*这里修改底部链接地址在（）内修改 */

}
#sub1
{
position: relative;
top:181px; /*修改top 与left值可改变视频位置*/
left:729px; /*修改top 与left值可改变视频位置*/

}

}
</style>
<div id="parent">
<div id="sub1">
<div id="play" >
<embed src="https://cloud.video.taobao.com//play/u/2271085369/p/1/e/6/t/1/233575617632.mp4" width="463" height="463" autostart="false"></embed>


</div>


<script>
function $(v){return document.getElementById(v);}
function view(id){$(id).style.display = "block";}
function hide(id){$(id).style.display = "none";}
function vide(){//点击图片显示视频
hide("pic");view("play");
}
</script>
</div>
</div>
</body>
</html>

热心网友时间：2023-10-20 06:39

<div style="background:url(....) no-repeat;width:500px;height:500;position:relative"><embed width=350 height=250 style="display:block;position:absolute;left:某某值;top:莫某值" src="优酷视频.swf"></div>
注意，这里面宽跟高度随意，只要视频的宽高小于外层div的宽高就行，不用margin，随便弄位置！

热心网友时间：2023-10-20 06:39

<div style="margin:50px auto 0 auto">这里是你的视频代码</div>
距顶部50px 水平局中.

热心网友时间：2023-10-20 06:40

外边距有4个值，如：
margin:10px 20px 30px 40px;
分别表示顶外边距、右外边距、底外边距和左外边距。

热心网友时间：2023-10-20 06:40

...........你这样试试吧，在你插入的视频代码前加入
<div style="width:*px;height:*px;border:red 1px solid; margin-left:*px; margin-top:*px; position:relative; ">
width height 自己调视频大小，margin-left margin-top后面自己加入像素数试试要多少适合你，看看能不能行，不能再问