本帖最后由 扬帆 于 2024-8-14 13:57 编辑
背景借用了令狐冲 版主的美图,特表感谢 @
<style>
#qsfg24 {
margin: 30px 0 30px calc(50% - 500px);
width: 1000px;
height: 550px;
position: relative;
background:
url('http://qslt.net/data/attachment/forum/202408/03/004151yrt4ra0vu0u40w4j.jpg.thumb.jpg') no-repeat center/cover;
mix-blend-mode:multiply;
overflow: hidden;}
.mypic {
position: absolute;
width: 50%;
height: 45%;
top:-10px;
left:480px;
object-fit: cover;
overflow: hidden;
mix-blend-mode:screen;}
.vid {
position: absolute;
top:-80px;
left:0px;
width: 100%;
height:115%;
object-fit: cover;
opacity: 0.95;
overflow: hidden;
mix-blend-mode: screen;}
</style>
<div id="qsfg24">
<h2 style="color: #191970">【凡哥教程第二十四讲作业】学一点点JS(四)动态追加元素</h2>
<p><img alt="" src="https://pic.imgdb.cn/item/66447cb80ea9cb1403ce47b8.gif" title="乌兰巴托的夜" style="position: absolute; top:80px;left:35px; width: 100px;height:100px; "/></p>
<img class="mypic" src="https://pic.imgdb.cn/item/66bb74f6d9c307b7e93b2e7d.gif" alt="" />
<video class="vid" src="https://img.tukuppt.com/video_show/15653652/01/59/07/63806a6eb7241.mp4" autoplay loop muted></video>
</div>
<script>
var aud = document.createElement('audio');
aud.style.position = 'absolute';
aud.style.right = '690px';
aud.style.top = '480px';
aud.title = '我是追加的';
aud.src = 'https://music.163.com/song/media/outer/url?id=2080477031.mp3';
aud.autoplay = true;
aud.loop = true;
aud.controls = true;
qsfg24.appendChild(aud);
</script>
|