时间戳

首页 > 解决方案 > Bootstrap 4画廊图像上的线性渐变叠加

html - Bootstrap 4画廊图像上的线性渐变叠加

问题描述

我使用带有 figure 和 fig-caption 标签的 Bootstrap 网格创建了一个图片库，并用标题文本覆盖了每个图片。现在我想使每个图像变暗并使文本更明显。我知道如何使用单个背景图像执行此操作，但我无法弄清楚如何为网格中的每个图像管理它。我的图片来源链接位于 HTML 中，因此我无法像以前一样在 CSS 中的图片链接上使用 background-image 属性。我是否需要更改我的设置并链接到 CSS 中的图像，或者可以使用我的 HTML 中的图像来完成？

到目前为止，我已经为图像的背景属性设置了一个线性渐变，但这只会将渐变放在图像后面。

适用于背景图像的代码示例：

#hero-image {

    background-image:linear-gradient(rgb(60, 60, 60), rgba(17, 17, 17, 0.5)), url("https://cdn.pixabay.com/photo/2017/05/09/09/15/edinburgh-2297668_1280.jpg");
    width: 100vw;
    height: 100vh;
    background-size: 100% 100%;
    
}

@media only screen and (min-width:600px) {
    #hero-image {
     background-image:linear-gradient(rgb(103, 98, 98), rgba(17, 17, 17, 0.5)), url("https://cdn.pixabay.com/photo/2019/04/22/08/58/edinburgh-4146031_1280.jpg");
    }
}
    <div id="hero-image">
         <div class="hero-text-box">
                <h1>Literary Edinburgh</h1> 
                <h4>Scotland's capital in books</h4> 
                <button id="hero-button" type="button" class="btn btn-primary btn-lg .btn-block">Get me reading!</button> 
        </div>
    </div>

标签： htmlcssoverlaylinear-gradients

解决方案

找到了这个 - 可能会有所帮助：

.outline-font {
  color: yellow;
  text-shadow:
   -1px -1px 0 black,  
    1px -1px 0 black,
    -1px 1px 0 black,
     1px 1px 0 black;
}

利用：

<h1 class="outline-font">I'm yellow font with black outline!</h1>

玩弄颜色和“宽度”，查找“文本阴影”，祝你好运！

推荐阅读