css - CSS图像填充所有在图像中间具有透明元素的屏幕

Question

我有这种情况使用CSS。

我希望图像位于屏幕中央，与屏幕大小无关，始终位于中间。这很容易做到。

但是，我想要在中间的图像（.png）是黑色的，里面有一些透明的字母。

所以，我希望整个屏幕都是黑色的，但屏幕中间仍然有透明的字母。

我想要透明字母的原因是因为我在页面加载时使用脚本来填充字母。这个想法是基于一个进度加载栏，但在这种情况下，使用字母作为“栏”。

我怎样才能做到这一点？我试过用 div 包围图像，但这不是最好的方法，因为根据屏幕大小，某些 div 可能无法到达图像并留下空白区域。

你有什么建议？我应该读什么？

以防我没有说清楚，这是一张图片：

帮助图片

score 1 · Accepted Answer

我目前能想到的最好的选择，将中心周围的屏幕变黑img是使用box-shadow：

#main {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -250px;
    box-shadow: 0 0 0 500px #000;
}

当然，这确实要求浏览器支持该box-shadow属性（或至少一种以供应商为前缀的实现），并且还需要一个相当任意的数字来“传播”模糊。

不幸的是，虽然我宁愿使用影响布局的border属性，border并且必须在定位时进行补偿img，而box-shadow不会影响页面的布局。

显然，通过这个演示，background-color应该用background-image你用来表示加载条的替代品或任何替代品来代替。

score 0 · Accepted Answer

所以你想要整个屏幕变黑，但是你有透明的字母想要被看到？

如果我正确理解您想要什么，您能否将主体（或 html 对象）的背景颜色设为黑色，保留图像，但使用绝对定位将白色（或彩色）图像直接放在徽标后面。

我想我不明白你为什么想要透明字母，而是黑色背景。

2 回答 2