Html 线性-内联上的梯度（<；img>；标签

我想在图像上创建

线性渐变
效果：


我尝试了以下代码：


html，
身体{
宽度：100%；
身高：100%；
保证金：0；
}
.bg img{
宽度：100%；
身高：100%；
背景：url（'http://unsplash.it/1200x800中-中不重复；
背景尺寸：封面；
}
.bg img：在{
内容：''；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景图像：线性渐变（右下角，#002f4b，#dc4225）；
不透明度：.6；
}
您可能正在查找内联图像。它的工作原理与背景大小类似。注意，它在IE和Edge上还不起作用

img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}


html，
身体{
身高：100%；
保证金：0；
}
.bg img{
身高：100%；
位置：相对位置；
}
.bg img img{
对象匹配：覆盖；
宽度：100%；
身高：100%；
显示：块；
}
.bg img：在{
内容：''；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景图像：线性渐变（右下角，#002f4b，#dc4225）；
不透明度：.6；
}

CSS可以完成这项工作

伪想法对我来说似乎很好，您应该使用
指针事件
来允许点击它

可以使用rgba（）颜色代替不透明度

您可以使用
display:flex
绘制列或
float

您可以使用选择器，如
nth-child（）
来选择第一个和奇数
。缩略图（用于调整线性渐变的大小并应用不同的方向）

您可以将线性背景设置为伪稀疏，当图像加载或丢失时，它将被看到并增加

您可以添加一个插入阴影，以便查看图像上的一些边


范例


html，
身体{
宽度：100%；
身高：100%；
}
.缩略图：以前{
内容：''；
排名：0；
左：0；
位置：绝对位置；
宽度：100%；
身高：100%；
背景：继承；
框阴影：插入0.4px 1px rgba（255,255,255,0.25）；
指针事件：无；
/*允许在其下单击*/
}
.盒子{
显示器：flex；
柔性流：柱包裹；
高度：200px；
宽度：600px；
保证金：自动；
溢出：隐藏；
长方体阴影：0 1px rgba（0、125、255、1）；
}
.box>缩略图{
弹性：1；
最小高度：100px；
最大高度：100px；
宽度：200px；
最大宽度：200px；
位置：相对位置；
背景：线性渐变（右下角，rgba（0，125，255，0.5），rgba（255，125，0，0.5））；
}
.box>.thumboil:类型的第一个{
最小高度：200px；
最大高度：200px；
最大宽度：200px；
}
.box>缩略图：第n个子项（奇数）{
背景：线性渐变（左上角，rgba（0，125，255，0.5），rgba（255，125，0，0.5））；
}
.img，
.img a{
显示：块；
身高：100%；
宽度：100%；
}
.img a img{
宽度：100%；
}
/*演示目的*/
身体{
显示器：flex；
保证金：0；
}

您能澄清一下什么是ejs吗？这是插入链接的图像吗？是的！非常感谢你！！