Html 不使用线性梯度的IMG上的黑色梯度层？

我有一个

img

标签，我想在上面添加另一个渐变div层（渐变div将有文本）

大概是这样的：

我已经知道了，但我不想这样，因为不是所有的手机版本都支持这个功能

而且，我已经看到它是可以实现的

但这不一样。我只想顶部和底部梯度-没有任何差异的边缘。（就像我在这里的第一张照片一样^）

但是，我不希望边缘变得更暗。我只希望红色矩形中的条带是从左到右的，并且在底部是对称的（底部应该有相同的渐变）

问题

如何修复代码以在顶部和底部实现笔直的相等渐变，而不使用

线性渐变

铌

我需要在渐变div上添加文本（文本来自DB）。因此，它不能是伪：：before/：：after元素div

---

正如我在评论中所建议的，如果您可以使用

伪

元素来实现这一点，如

img

容器DOM元素的

：after

和

：：before

您可以定义

伪

元素，然后使用

框阴影

复制渐变效果

在这里，我对您的DOM结构做了一些更改，如下所示：

代码段：

.img容器{
位置：相对位置；
}
.img容器img{
最大宽度：100%；
}
.img容器：：之后，
.img容器：：之前{
内容：“；
显示：内联块；
位置：绝对位置；
左：0；
右：0；
宽度：100%；
高度：50px；
}
.img容器：：之前{
排名：0；
-webkit盒阴影：0px 25px 16px-10px rgba（0,0,0,0.5）插图；
盒影：0px25px16px-10pxRGBA（0,0,0,0.5）插页；
}
.img容器：：之后{
底部：0；
-webkit盒阴影：0px-25px 16px-10px rgba（0,0,0,0.5）插图；
盒影：0px-25px-16px-10px rgba（0,0,0,0.5）插页；
}

---

正如我在评论中所建议的那样，如果您可以使用

伪
元素作为
:after
和
:before
来实现这一点，您的
img
容器DOM元素

您可以定义
伪
元素，然后使用
框阴影
复制渐变效果

在这里，我对您的DOM结构做了一些更改，如下所示：

代码段：

.img容器{
位置：相对位置；
}
.img容器img{
最大宽度：100%；
}
.img容器：：之后，
.img容器：：之前{
内容：“；
显示：内联块；
位置：绝对位置；
左：0；
右：0；
宽度：100%；
高度：50px；
}
.img容器：：之前{
排名：0；
-webkit盒阴影：0px 25px 16px-10px rgba（0,0,0,0.5）插图；
盒影：0px25px16px-10pxRGBA（0,0,0,0.5）插页；
}
.img容器：：之后{
底部：0；
-webkit盒阴影：0px-25px 16px-10px rgba（0,0,0,0.5）插图；
盒影：0px-25px-16px-10px rgba（0,0,0,0.5）插页；
}

（以
@vivekkupadhayy
的答案为例）您可以制作一个覆盖div，并将其设为插入阴影。然后你可以添加任何你想要的内容


.img容器，
.img覆盖{
位置：绝对位置；
排名：0；
左0；
}
.img集装箱{
溢出：隐藏；
}
.img容器img{
最大宽度：100%；
}
.img覆盖{
宽度：120%；
身高：100%；
-webkit盒阴影：嵌入0px 0px 25px 5px rgba（0,0,0.75）；
盒影：嵌入0px 0px 25px 5px rgba（0,0,0,0.75）；
左边距：-25px；
填充：0px 30px；
颜色：白色；
}

一些文本
（以
@vivekkupadhayy
的答案为例）您可以制作一个覆盖div，并将其设为插入阴影。然后你可以添加任何你想要的内容


.img容器，
.img覆盖{
位置：绝对位置；
排名：0；
左0；
}
.img集装箱{
溢出：隐藏；
}
.img容器img{
最大宽度：100%；
}
.img覆盖{
宽度：120%；
身高：100%；
-webkit盒阴影：嵌入0px 0px 25px 5px rgba（0,0,0.75）；
盒影：嵌入0px 0px 25px 5px rgba（0,0,0,0.75）；
左边距：-25px；
填充：0px 30px；
颜色：白色；
}

一些文本
通过使用多个阴影，您可以将目标对准所需的侧面

在这里，将模糊的扩散半径（第4个参数）设置为负值，防止其沿边扩散，并使用阴影的水平和垂直偏移，在这种情况下，仅以顶部和底部为目标


.innerDiv
{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景：透明；
不透明度：1；
边框：实心1px红色；
填充物：5px；
z指数：92299；
框阴影：
插图0 50px 50px-40px rgba（0,0,0,1），
插图0-50px 50px-40px rgba（0,0,0,1）；
}

一些文本
通过使用多个阴影，您可以将目标对准所需的侧面

在这里，将模糊的扩散半径（第4个参数）设置为负值，防止其沿边扩散，并使用阴影的水平和垂直偏移，在这种情况下，仅以顶部和底部为目标


.innerDiv
{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景：透明；
不透明度：1；
边框：实心1px红色；
填充物：5px；
z指数：92299；
框阴影：
插图0 50px 50px-40px rgba（0,0,0,1），
插图0-50px 50px-40px rgba（0,0,0,1）；
}

一些文本
您可以使用
伪
元素创建单独的
框阴影
，如img容器标签的
之后和
之前。因此，您只需要在顶部和底部，从左边缘到右的渐变？您可以使用Photoshop或任何其他图像编辑工具来完成that@AndreiV正确的。就像我的冷杉