图图专用帖

马黑黑

girl

马黑黑

马黑黑

马黑黑

马黑黑

马黑黑

背景图片

马黑黑

56

马黑黑

filter

马黑黑

97

马黑黑

草原

马黑黑

<style>
#mnBox {
        margin: auto;
        display: flex;
        justify-content: center;
        width: 760px;
        height: 760px;
        background: linear-gradient(100deg, rgba(9, 19, 199, .5) 0%, rgba(99, 19, 219, .4) 100%);
        position: relative;
        border-radius: 50%;
        font: 900 3em / 1em Sans-serif;
        color: deeppink;
        text-shadow: 2px 2px rgba(0, 0, 0, .9);
}
#mnBox::before {
        content: '';
        position: absolute;
        width: 760px;
        height: 760px;
        border-radius: 50%;
        background: url('https://638183.freep.cn/638183/Pic/2022/x9.jpg') no-repeat center/contain;
        z-index: -1;
}
#mnBox::after {
        content: attr(data-h);
        position: absolute;
        bottom: 60px;
        text-align: center;
        filter: blur(1px);
}
</style>

<div id="mnBox" data-h="小九生日快乐"></div>

<script>
let wyyy = document.createElement('iframe');
wyyy.src = 'https://music.163.com/outchain/player?type=2&id=541326593&auto=1&height=66';
wyyy.style.display = 'none';
document.getElementById('mnBox').appendChild(wyyy);

</script>

马黑黑

z-index: -1 在论坛不起作用。
变通方法：在 #mnBox 而不是在伪元素设置 z-index，把主窗体的层提升为3或更大便可。

受种种因素影响，渲染效果本地的与论坛上的有差异，感觉alpha值在论坛可以设大一些。

马黑黑

马黑黑

似乎渲染的是图片的背景，也就是说，主窗体的设置不生效

马黑黑

好吧，多多的坑，关于z-index!

定稿：

<style>
#mnBox {
        margin: auto;
        position: relative;
        display: flex;
        justify-content: center;
        width: 760px;
        height: 760px;
        background: url('https://www.huachaowang.com/data/attachment/forum/202204/01/140441rb9c4548b5899m94.jpg') no-repeat center/contain;
        border-radius: 50%;
        font: 900 3em / 1em Sans-serif;
        color: deeppink;
        text-shadow: 2px 2px rgba(0, 0, 0, .9);
}
#mnBox::before {
        content: '';
        position: absolute;
        width: 760px;
        height: 760px;
        border-radius: 50%;
        background: linear-gradient(100deg, rgba(9, 19, 199, .5) 0%, rgba(99, 19, 219, .4) 100%);
}
#mnBox::after {
        content: attr(data-h);
        position: absolute;
        bottom: 60px;
        text-align: center;
        filter: blur(1px);
        z-index: 12;
}
</style>

<div id="mnBox" data-h="小九生日快乐"></div>

<script>
let wyyy = document.createElement('iframe');
wyyy.src = 'https://music.163.com/outchain/player?type=2&id=541326593&auto=1&height=66';
wyyy.style.display = 'none';
document.getElementById('mnBox').appendChild(wyyy);

</script>

马黑黑

xuehua

8y

马黑黑

马黑黑

马黑黑

50K

77K

马黑黑