如何在图片标题中使用 css？答案

【问题标题】：How can i use css in image caption?如何在图片标题中使用 css？
【发布时间】：2022-01-04 18:09:38
【问题描述】：

其实我也想和图片做一样的事情

我正在尝试这个 css

.av-image-caption-overlay{
  bottom: -6em  !important;
 background-color: black  !important;
height: 200px !important;
 opacity: 0.5;
left: 0;
  filter: alpha(opacity=50)  !important;
}

但工作不完美，我正在分享结果。

【问题讨论】：

你知道css线性渐变吗？
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example

标签： javascript css css-selectors

【解决方案1】：

这不是最优雅的，也不是唯一的方法，但这会奏效。

body {
  font-family: sans-serif;
}

.av-image-caption-overlay {
  position: absolute;
}

.av-image-caption-overlay img {
  max-width: 400px;
}

.av-image-caption-overlay span {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, .5);
  background: linear-gradient(0deg, rgba(0,0,0,.75) 25%, rgba(0,0,0,0) 100%);
  height: 100px;
  left: 0;
  right: 0;
  color: white;
  padding: 24px;
  font-size: 20px;
  display: flex;
  align-items: flex-end;
}

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />

  </head>
<body>
  <div class="av-image-caption-overlay">
  <span>CAPTION</span><img className="text-image-list-image" src="https://i.stack.imgur.com/xm82O.jpg" alt="" />
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

背景线性渐变应该这样做。

关键是在你想要设置样式的 div 中创建一个元素，给它以下属性，它应该可以工作。

div {
    position: relative;
    background: url(/* Some image url */); /* Or you could append an 'img' tag into this div like I did in the codepen below */
}

.overlay { /* Or you could use the '::before' pseudo-element of the div here */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent, #000a);
    z-index: 999;
}

这是我在 Codepen 上对 https://codepen.io/emekaorji/pen/xxLvQaW 所做的事情

【讨论】：