《美丽的姑娘》仲南（哈萨克族民歌）

偶然~ · 发表于 2025-12-4 12:35

亦是金发表于 2025-12-4 12:12
我在墨香论坛发表的帖子https://mxjy.net/forum.php?mod=v ... 1&extra=#pid1414682。有加分处的。代码结 ...

换了QQ浏览器和猎豹都不行，请马老师、小辣椒、红影他们来看看怎么回事@马黑黑 @红影 @小辣椒

阿狄丽娜 · 发表于 2025-12-4 13:41

笑的好开心啊

马黑黑 · 发表于 2025-12-4 13:42

亦是金发表于 2025-12-4 11:55
请你帮忙在代码结尾处添上代码：

实际上连一楼的编辑按钮都已经被遮挡了，常规的操作是进入不了你的帖子的编辑界面。原因出在你的 #mama {} 选择器的 margin 属性设置上，你的原始设置是：

      margin: 50px  -330px  calc(50%  - 650px);

通过 margin 上右下左四个方向的设置可以定位帖子界面，但你的margin属性只有了三个方向：

      50px - 上
      -330px - 右
      calc(50% - 650px) - 下
      空 - 左

也许 -330px 也被左（left属性）使用了，但也不一定能够确定，对margin的三值设置不同的浏览器可能存在不同的解析倾向，应设置全四个属性值。

可能更简单直接的定位是酱紫：margin 用来设置上下，特别是上，为的是让头像不被遮挡，margin-top: 120px; 这样即可，记得把原句 margin 删掉。然后——

      left: calc(50% - 81px);
      transform: translateX(-50%);

上面，在帖子 position: relative; 的设定前提下，left 属性设为 50% - 81px，81px是这里的帖子偏移量；transform属性则是左移帖子 50%，这两句结合起来，正常令帖子水平居中。

马黑黑 · 发表于 2025-12-4 13:58

帖子制作精美，十分佩服。修改过的HTML代码如下：

<style>
#mama {
margin-top: 120px;
left: calc(50% - 81px);
transform: translateX(-50%);
width: 1300px;
height: 700px;
background: url('') no-repeat center/cover;
border-radius: 22px;
border: thick double #88abfa;
overflow: hidden;
z-index: 1;
position: relative;
}
#mama > video {
position: absolute;
width: 100%;
height: 100%;
left: 0%; top: 0%;
object-fit: cover;
transform: rotateY(180deg);
opacity: .99;
mix-blend-mode: lighten;
//-webkit-mask: linear-gradient(to right top, red 10%, transparent 90%, transparent);
pointer-events: none;
}
</style>
<div id="mama" class="mama">
<audio src="https://s2.cldisk.com/sv-w9/audio/f9/a3/da/e13a0295eaa64ab24037811c40ff3d5b/audio.mp3" autoplay loop></audio>
<video src="https://video-qn.51miz.com/preview/video/00/00/68/45/V-684524-BFF1F93A.mp4" autoplay loop muted></video>
<video src="https://video-qn.51miz.com/preview/video/00/00/12/68/V-126813-9655CF1F.mp4" autoplay loop muted></video>
</div>
<script>
var geci = `[00:00.00]《美丽的姑娘》仲南
[00:05.00]哈萨克族民歌
[00:08.00]记谱：小叶子
[00:11.00]演唱：仲南
[00:14.00]歌词编辑：亦是金
[00:19.00]。。。。。。
[00:23.70]你酷似天上的星辰
[00:31.69]犹如那鲜花陶醉人
[00:39.78]祝福你坦荡人生路
[00:48.03]美丽又贤惠的女神
[00:56.05]如春光灿烂你容颜
[01:07.24]盛开的鲜花很鲜艳
[01:17.60]可爱又可亲的容姿
[01:25.57]使得人温暖了心田
[01:32.69]
[01:38.08]你貌美如花又似玉
[01:45.98]似瑰宝魅人又陶醉
[01:54.35]你身价百倍胜似宝
[02:02.30]追求着首选的美女
[02:10.41]如春光灿烂你容颜
[02:21.65]盛开的鲜花很鲜艳
[02:31.94]可爱又可亲的容姿
[02:39.97]使得人温暖了心田
[02:46.74]
[02:52.42]你素有谦卑之心腑
[03:00.50]可贵的美德自拥有
[03:08.65]天缘者总归不相逢
[03:16.72]有情人终将成眷属
[03:24.75]如春光灿烂你容颜
[03:35.60]盛开的鲜花很鲜艳
[03:46.31]可爱又可亲的容姿
[03:54.31]使得人温暖了心田
[04:02.48]如春光灿烂你容颜
[04:12.70]盛开的鲜花很鲜艳
[04:22.94]可爱又可亲的容姿
[04:30.94]使得人温暖了心田
[04:36.82]
[04:39.24]如春光灿烂你容颜
[04:50.44]盛开的鲜花很鲜艳
[05:00.75]可爱又可亲的容姿
[05:08.66]使得人温暖了心田
[05:14.78]
[05:16.90]使得人温暖了心田
[05:24.21]
[05:15.60]-- 谢谢欣赏 --
[05:28.15]`;
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/pinpuz_yslrc.js';
document.body.appendChild(sf);
sf.onload = () => {
HCPlayer({
papa: '#mama',
geci: geci,
skip: 0,
average: 0,
pinpu: { num: 40, color: 'linear-gradient(to right, transparent, green, lightgreen)' },
player_css: 'left: 5%; top: 82%; --color: Gold; --len: 3px;',
lrc_css: 'left: 50%; transform: translateX(-50%); top: 90%; --bg: linear-gradient(40deg, #fa4354, #fa4354, #7718f8, #18f5f8, #f5f818, #b75004); color: #Gold;',
fs_css: 'left: 20px; top: 20px; --bg: transparent; --color: Orange;',
});
};
</script>