html - 如何在图像上方的文本中添加对比度

This question already has answers here:

Change color of text responding to background color
                                
                                    （2个答案）
                                
                        
                                9个月前关闭。
            
                    
使用移动尺寸时，我需要文本与所提供的图像可读。

#jumbotron-p {
    font-weight: 600;
}

<div class="jumbotron text-center">
    <h1 class="display-4">PATTERN</h1>
    <p id="jumbotron-p">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate consequuntur?</p>
</div>

最佳答案

您可以尝试通过以下方式将文本阴影添加到超大屏幕内部的文本中：

.jumbotron.text-center h1, .jumbotron.text-center p {
    text-shadow: 0 0 10px rgba(0,0,0,0.25);
}

或通过使用其类来选择背景叠加层，以在背景中添加图像，然后向其应用插入框阴影（假设.jumbotron是背景图像的容器）：

.jumbotron.text-center {
    box-shadow: inset 100vw 0 0 rgba(0,0,0,0.25);
}

关于html - 如何在图像上方的文本中添加对比度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55972396/