html - 不使用线性渐变的 IMG 上的黑色渐变层？

Question

我有一个 img 标签，我想在它上面添加另一个渐变 div 层(那个渐变 div 会有文本)。

像这样:

我已经知道我can do this with linear-gradient但我不希望那样，因为并非所有移动版本都支持此功能。

此外 - 我已经看到它可以实现 via box-shadow with inset

但不一样。我只想要顶部和底部渐变 - 边缘没有任何差异。 (就像我在这里的第一张照片一样 ^)

This is what i've tried : JSBIN

但同样，我不希望边缘变暗。我只希望红色矩形中的 strip 是从左到右的。而且 - 对称 - 在底部(相同的渐变应该在底部)。

问题

如何在不使用 linear-gradient 的情况下修复我的代码以在顶部和底部实现直线相等的渐变？

注意

I need to add text on that gradient div ( text is from DB) . So It can not be a pseudo ::before/::after element div.

Answer 1

通过使用多个阴影，您可以瞄准您想要的侧面。

这里完成了将模糊的扩散半径(第 4 个参数)设置为负值，防止它沿边扩散，并使用水平和阴影的垂直偏移，在本例中，仅针对顶部和底部。

.innerDiv
{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background :transparent;
  opacity:1;
  border:solid 1px red;
  padding:5px;
  z-index:92299; 
  box-shadow:
    inset 0 50px 50px -40px rgba(0,0,0,1),
    inset 0 -50px 50px -40px rgba(0,0,0,1);
}

<div style='position:relative;border:solid 1px lightgray;height:400px'>
  <div class='innerDiv'>
    Some text
  </div>
  <img src='http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg' height="400px" />
</div>

---

根据之前的评论，这是一个产生完全相同结果的伪元素版本，并且通过使用 CSS attr() 避免了编译时数据的问题CSS。

我还添加了一个脚本来显示文本也可以动态添加。

window.addEventListener('load', function() {
  var div = document.querySelector('div');
  var text = div.getAttribute('data-text');
  div.setAttribute('data-text', text + ', and this were added dynamically using script');
})

div
{
  position:relative;
}
div::after
{
  content: attr(data-text);
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background :transparent;
  opacity:1;
  border:solid 1px red;
  padding:5px;
  z-index:92299; 
  box-shadow:
    inset 0 50px 50px -40px rgba(0,0,0,1),
    inset 0 -50px 50px -40px rgba(0,0,0,1);
}

<div style='position:relative;border:solid 1px lightgray;height:400px' data-text="Some text set using an attribute in the markup">
  <img src='http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg' height="400px" />
</div>