亦是金 发表于 2025-12-4 12:12
我在墨香论坛发表的帖子https://mxjy.net/forum.php?mod=v ... 1&extra=#pid1414682。有加分处的。代码结 ...
我换一个浏览器看看
亦是金 发表于 2025-12-4 12:12
我在墨香论坛发表的帖子https://mxjy.net/forum.php?mod=v ... 1&extra=#pid1414682。有加分处的。代码结 ...
换了QQ浏览器和猎豹都不行，请马老师、小辣椒、红影他们来看看怎么回事@马黑黑 @红影 @小辣椒
笑的好开心啊
亦是金 发表于 2025-12-4 11:55
请你帮忙在代码结尾处添上代码：
实际上连一楼的编辑按钮都已经被遮挡了，常规的操作是进入不了你的帖子的编辑界面。原因出在你的 #mama {} 选择器的 margin 属性设置上，你的原始设置是：
margin: 50px-330pxcalc(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%，这两句结合起来，正常令帖子水平居中。
帖子制作精美，十分佩服。修改过的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 = `《美丽的姑娘》仲南
哈萨克族民歌
记谱：小叶子
演唱：仲南
歌词编辑：亦是金
。。。。。。
你酷似天上的星辰
犹如那鲜花陶醉人
祝福你坦荡人生路
美丽又贤惠的女神
如春光灿烂你容颜
盛开的鲜花很鲜艳
可爱又可亲的容姿
使得人温暖了心田
你貌美如花又似玉
似瑰宝魅人又陶醉
你身价百倍胜似宝
追求着首选的美女
如春光灿烂你容颜
盛开的鲜花很鲜艳
可爱又可亲的容姿
使得人温暖了心田
你素有谦卑之心腑
可贵的美德自拥有
天缘者总归不相逢
有情人终将成眷属
如春光灿烂你容颜
盛开的鲜花很鲜艳
可爱又可亲的容姿
使得人温暖了心田
如春光灿烂你容颜
盛开的鲜花很鲜艳
可爱又可亲的容姿
使得人温暖了心田
如春光灿烂你容颜
盛开的鲜花很鲜艳
可爱又可亲的容姿
使得人温暖了心田
使得人温暖了心田
-- 谢谢欣赏 --
`;
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>
如果 margin-top: 120; 不够，可以加大一点，好像 @小辣椒 用 200px？
偶然~ 发表于 2025-12-4 11:51
怎么没有加分的按钮？
现在可以了
马黑黑 发表于 2025-12-4 14:00
现在可以了
{:4_180:}
辛苦马老师了
停驻欣赏 再欣赏~美得爱不惜手呢{:4_199:}
这首歌曲真是太好听了，我收藏了有机会借用一下！
马黑黑 发表于 2025-12-4 13:42
实际上连一楼的编辑按钮都已经被遮挡了，常规的操作是进入不了你的帖子的编辑界面。原因出在你的 #mama { ...
感谢黑黑老师详细讲解！辛苦了！{:4_180:}
马黑黑 发表于 2025-12-4 13:58
帖子制作精美，十分佩服。修改过的HTML代码如下：
我已经复制收藏了。谢谢老师！{:4_190:}
清茶煮雪 发表于 2025-12-4 15:47
停驻欣赏 再欣赏~美得爱不惜手呢
谢谢欣赏！{:4_187:}
清茶煮雪 发表于 2025-12-4 15:49
这首歌曲真是太好听了，我收藏了有机会借用一下！
祝你欣赏愉快！{:4_204:}
图中这位姑娘制作的真美，特别是眼睛。
亦是金 发表于 2025-12-4 16:46
我已经复制收藏了。谢谢老师！
{:4_191:}
亦是金 发表于 2025-12-4 16:41
感谢黑黑老师详细讲解！辛苦了！
{:4_190:}
这视频是AI制作吧，感觉AI的美女都长得差不多呢{:4_173:}
特色歌词很漂亮，小播也很赞。
欣赏亦是金老师好帖{:4_199:}
偶然~ 发表于 2025-12-4 12:35
换了QQ浏览器和猎豹都不行，请马老师、小辣椒、红影他们来看看怎么回事@马黑黑 @红影 @小辣椒
白天在外面了，不好意思。
看到马老师已经修改了{:4_204:}
马黑黑 发表于 2025-12-4 13:59
如果 margin-top: 120; 不够，可以加大一点，好像 @小辣椒 用 200px？
黑黑，今天我那给修改的位置出错了，不晓得代码是不是引号问题