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

Question

使用移动尺寸时，我需要文本与所提供的图像可读。

#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>

Answer 1

您可以尝试通过这种方式将文本阴影添加到巨型机内的文本中：

.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);
}