CSS淡出的股利和內容左，右邊緣

Question

我這裏有一個非常簡單的HTML佈局show ...

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>

我tyring淡出左右邊緣的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>

更具動態的背景，你可能會需要使用實際掩蔽，只是確保回落擺好不支持它的瀏覽器。