世外桃源 发表于 2023-12-20 23:31

学习帖（花间辞），碰到问题了

本帖最后由 世外桃源 于 2023-12-21 10:50 编辑 <br /><br /><style>
#papa {
      margin: 0 0 0 calc(50% - 880px);
      display: grid;
      place-items: center;
      width: 1600px;
      height: 885px;
      background: url('https://pic.imgdb.cn/item/65830954c458853aef7e9cc0.jpg');
      overflow: hidden;
      position: relative;
}
video {
      position: absolute;
      top: -76px;
      width: 1600px;
      height: 960px;
      object-fit: cover;
      opacity: .75;
}
</style>

<div id="papa">
      <video src="https://img.tukuppt.com/video_show/2405811/00/02/03/5b4f10264b2c3.mp4" autoplay loop muted></video>
</div>

<script>
const sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/mplayer.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);

sf.onload = () => {
      const myplayer = new mPlayer();
      myplayer.setAudSrc('https://music.163.com/song/media/outer/url?id=1320101152');
      myplayer.setBtnCss(`
      background: url('https://pic.imgdb.cn/item/65830986c458853aef7f9bc4.png') no-repeat center/cover;width: 200px;height: 200px;bottom: 400px;“
      `);
      myplayer.setLrcCss('top:120px; left:600px; color: tan; --bg: orange;');
      myplayer.lrcAr = [];
};
</script>

世外桃源 发表于 2023-12-20 23:36

我这个圆的帆船，再大出来也是这么小，和场景不符合了，老师我错在哪里？@马黑黑

世外桃源 发表于 2023-12-20 23:39

@幸运草
小草儿，我做了老师今天分享的--花间辞的效果，感觉有错误

醉美水芙蓉 发表于 2023-12-21 07:07

亦是金 发表于 2023-12-21 08:45

@世外桃源把代码“background: url('https://pic.imgdb.cn/item/65830986c458853aef7f9bc4.png') no-repeat center/cover;
       bottom: 400px;“，改为“background: url('https://pic.imgdb.cn/item/65830986c458853aef7f9bc4.png') no-repeat center/cover;width: 200px;height: 200px;bottom: 400px;“试试！

红影 发表于 2023-12-21 09:19

这个效果好壮观啊，欣赏桃源好帖{:4_199:}

红影 发表于 2023-12-21 09:21

应该是插件里设置了按钮的大小了吧，桃源试试亦是金老师5楼的方法{:4_187:}

梦油 发表于 2023-12-21 09:26

欣赏佳作，问候桃园。

红影 发表于 2023-12-21 09:30

我去看了一下黑黑的教学贴

③ 配置播放按钮 ：

myplayer.setBtnCss(`
        background: url('https://638183.freep.cn/638183/t23/btn/meihua.png') no-repeat center/cover;
        bottom: 20px;
`);

/* 如果分行写，请使用反引号 ` 将字符包裹起来，不分行可以用小角单、双引号。支持背景图片属性、left，right，top，bottom属性，以及 width 、height等。 */

是可以支持按钮的定位和大小调整的。桃源可以试一下{:4_187:}

世外桃源 发表于 2023-12-21 10:51

亦是金 发表于 2023-12-21 08:45
@世外桃源把代码“background: url('https://pic.imgdb.cn/item/65830986c458853aef7f9bc4.png') no-repe ...

感谢亦是金老师，修改好了{:4_187:}

世外桃源 发表于 2023-12-21 10:51

醉美水芙蓉 发表于 2023-12-21 07:07
做得不错呢！

谢谢{:4_187:}

世外桃源 发表于 2023-12-21 10:52

红影 发表于 2023-12-21 09:19
这个效果好壮观啊，欣赏桃源好帖

谢谢红影美女{:4_187:}

世外桃源 发表于 2023-12-21 10:52

红影 发表于 2023-12-21 09:30
我去看了一下黑黑的教学贴

③ 配置播放按钮 ：


谢谢{:4_187:}

世外桃源 发表于 2023-12-21 10:53

梦油 发表于 2023-12-21 09:26
欣赏佳作，问候桃园。

谢谢梦油欣赏{:4_187:}

世外桃源 发表于 2023-12-21 11:39

红影 发表于 2023-12-21 09:30
我去看了一下黑黑的教学贴

③ 配置播放按钮 ：


谢谢美女领导，零基础，小白一个，许多不会，多多指教了{:4_187:}

马黑黑 发表于 2023-12-21 11:50

世外桃源 发表于 2023-12-20 23:39
@幸运草
小草儿，我做了老师今天分享的--花间辞的效果，感觉有错误

设置播放器控制器属性：

myplayer.setBtnCss(`
    background: url('https://pic.imgdb.cn/item/65830986c458853aef7f9bc4.png') no-repeat center/cover;/* 背景图片 */
    width: 200px; /* 宽度 */
    height: 200px;/* 高度 */
    bottom: 400px;“/* 位置 - 相对于底部 */
`);

红影 发表于 2023-12-21 12:25

世外桃源 发表于 2023-12-21 10:52
谢谢红影美女

桃源真快，这么快就做出来了呢{:4_187:}

红影 发表于 2023-12-21 12:26

世外桃源 发表于 2023-12-21 11:39
谢谢美女领导，零基础，小白一个，许多不会，多多指教了

不敢当，看楼下，黑黑的指导才是最细致的呢{:4_187:}

幸运草 发表于 2023-12-21 13:20

世外桃源 发表于 2023-12-20 23:39
@幸运草
小草儿，我做了老师今天分享的--花间辞的效果，感觉有错误

挺好的吖，非常漂亮{:6_228:}

幸运草 发表于 2023-12-21 13:21

感觉一个大浪要把我砸趴下啦，我得躲远点{:6_231:}
页: [1] 2
查看完整版本: 学习帖（花间辞），碰到问题了