CSS fade out linken und rechten Rand des div und Inhalt

Question

ich hier eine sehr einfache HTML-Layout-Show haben ...

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>

Ich tyring die linken und rechten Ränder auszublenden der div und sein Inhalt. Ich habe verschiedene Optionen gesehen, bin mir aber nicht sicher, welches das beste ist.

CSS-Maske-Bild wird als experimentell so nicht sicher, dass der beste Ansatz hier aufgeführt ist.

Was ist meine beste Option, um dies zu erreichen?

Answer 1

Da Sie eine bekannte Hintergrundfarbe haben, können Sie einen "bekannten BG -> transparenten" Farbverlauf überlagern. Für eine feinere Steuerung können Sie es zweimal anwenden: einmal links und einmal rechts.

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>

Für weitere dynamische Hintergründe, müssen Sie wahrscheinlich tatsächlich Maskierung verwenden und sicherzustellen, nur um es wieder ordnungsgemäß in Browsern fällt, dass es nicht unterstützen.