如何使用 css 在图像中制作渐变动画

Question

所以，我有一个画廊，在图片底部有每张图片的描述/标题。我为每个画廊线制作了四张图片，并且所有图片的尺寸都相同。

这是 HTML 代码：

<div class="gallery">
    <div class="flag">
        <img src="image1.png">
        <div class="desc">some description</div>
    </div>
</div>

<div class="gallery">
    <div class="flag">
        <img src="image2.png">
        <div class="desc">some description</div>
    </div>
</div>

<div class="gallery">
    <div class="flag">
        <img src="image3.png">
        <div class="desc">some very long description</div>
    </div>
</div>

<div class="gallery">
    <div class="flag">
        <img src="image4.png">
        <div class="desc">some description</div>
    </div>
</div>

这是 CSS 代码：

.gallery {
            padding: 6px 6px;
            float: left;
            width: 24.99999%;
        }
.flag {
          border: 1px solid #ccc;
          padding: 5px;
          box-shadow: 3px 3px 10px black;
        }
.flag img {
          width: 100%;
          height: auto;
          box-shadow: 3px 3px 10px black;
        }
.desc {
            padding: 10px;
            text-align: center;
            font-color: black;
            font-weight: bold;
            font-size: 18px;
        }

我的问题是，如果一些图片有像image3.png这样的长描述，.desc的高度会比另一个高，而且我的画廊里有很多图片，所以这会使画廊不为了。我的问题是，如何使一些具有长描述的图像中的 font-size 响应 .desc 大小？其余图像与 .desc 中的 font-size 保持静止。有什么建议吗？之前谢谢

Answer 1

一个快速的解决方案是创建一个字体较小的新选择器，并且仅在您看到 font-size 影响另一个图像的情况下应用它。像这样：

   <div class="gallery">
<div class="flag">
    <img src="image4.png">
    <div class="desc myNewSelector">some description</div>
</div>

        .desc {
        padding: 10px;
        text-align: center;
        font-color: black;
        font-weight: bold;
        font-size: 18px;
    }
        .myNewSelector {
        font-size: 16px;
    }

如何使用 css 在图像中制作渐变动画

how to make gradient animation in image with css

html

css

font-size

responsive-design