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

Question

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

body{
  background:teal;
}

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

<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>

我很想淡出 div 及其内容的左右边缘。我看到过各种选择，但不确定哪一个是最好的选择。

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

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

Answer 1

因为你有一个已知的背景颜色，你可以在顶部叠加一个“已知的 BG -> 透明”渐变。为了更好地控制，您可以应用它两次:一次在左侧，一次在右侧。

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>

对于更动态的背景，您可能需要使用实际的 mask ，并确保它在不支持它的浏览器中正常回退。