CSS淡出div和内容的左右边缘

Question

我在这里有一个非常简单的HTML布局......

＆＃13;

＆＃13;

body{
  background:teal;
}

#mycontent{
  background:wheat;
  text-align:center;
  padding:20px;
  margin:20px;
}

＆＃13;

<div id="mycontent">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed turpis arcu. Mauris ultricies eget nisl quis auctor. Mauris magna lorem, sodales at posuere interdum, sodales quis purus. Nam non augue quis urna accumsan mattis nec eget mi. Pellentesque at tempus elit. Sed eu enim nunc. Suspendisse rhoncus id nibh id maximus. Cras volutpat efficitur sem, at volutpat nisl porttitor quis. Fusce pellentesque lacus odio, vitae scelerisque metus placerat et. Duis a felis dui. Aenean ante neque, condimentum a massa sed, eleifend porttitor elit.
</div>

＆＃13;

＆＃13;

＆＃13;

我想要淡出div的左右边缘及其内容。我已经看到了各种选择，但我不确定哪一个最适合。

CSS mask-image被列为实验性的，所以不确定这是最好的方法。

实现这一目标的最佳选择是什么？

Answer 1

由于您具有已知的背景颜色，因此可以在顶部覆盖“已知BG - ＆gt;透明”渐变。为了更好地控制，您可以应用两次：一次在左侧，一次在右侧。

body{
  background:teal;
}

#mycontent{
  background:wheat;
  text-align:center;
  padding:20px;
  margin:20px;
  position: relative;
}

#mycontent:after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  background-image:
    linear-gradient(to right, #008080, rgba(0,128,128,0) 50px),
    linear-gradient(to left , #008080, rgba(0,128,128,0) 50px);
}

<div id="mycontent">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed turpis arcu. Mauris ultricies eget nisl quis auctor. Mauris magna lorem, sodales at posuere interdum, sodales quis purus. Nam non augue quis urna accumsan mattis nec eget mi. Pellentesque at tempus elit. Sed eu enim nunc. Suspendisse rhoncus id nibh id maximus. Cras volutpat efficitur sem, at volutpat nisl porttitor quis. Fusce pellentesque lacus odio, vitae scelerisque metus placerat et. Duis a felis dui. Aenean ante neque, condimentum a massa sed, eleifend porttitor elit.
</div>

对于更具动态性的背景，您可能需要使用实际屏蔽，并确保它在不支持它的浏览器中优雅地回退。