Bootstrap 引导缩略图线性渐变

b4lqfgs4 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(161)

我试着用图像制作一个三列网格，这样一些文本就可以覆盖这些图像。我找到了一个线性渐变的例子来实现这个目的：

.card__content {
    position: absolute;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

所以在HTML中我有下一个：

<body>
<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-xs-12 thumb">
            <div class="thumbnail" style="position:relative;">
                <img src="1.jpg" align="left" class="img-rounded img-responsive">
                <div class="card__content">
                    <h3>Matricaria is a genus of flowering plants in the chamomile tribe within the sunflower family</h3>
                </div>   
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-xs-12 thumb">
            <div class="thumbnail" style="position:relative;">
                <img src="2.jpg" align="left" class="img-rounded img-responsive">
                <div class="card__content">
                    <h3>Gulls, or colloquially seagulls, are seabirds of the family Laridae in the suborder Lari</h3>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-xs-12 thumb">
            <div class="thumbnail" style="position:relative;">
                <img src="3.jpg" align="left" class="img-rounded img-responsive">
                <div class="card__content">
                    <h3>Cirsium arvense is a perennial species of flowering plant in the family Asteraceae</h3>
                </div>
            </div>
        </div>
    </div>
</div>

但是这个渐变并没有粘附到图像的末端，而是向右侧延伸。缩略图的边框也没有拉伸到整个块的长度，尽管没有渐变。下面是它现在的样子。Image
救命啊！

twitter-bootstrap

来源：https://stackoverflow.com/questions/73926869/linear-gradient-for-bootstrap-thumbnail