Fading out text at bottom of a section with transparent div, but height stays under section after overlaying div

后端未结

关注

 5  1582

情话喂你 2020-12-02 17:22

I\'m trying to get a nice fade-out effect at the bottom of a section of text as a \'read more\' indicator.

I\'ve been following a bit off this and other tutorials,

5条回答

清歌不尽 (楼主)

2020-12-02 17:48

Answer for 2020:

This effect can now be achieved with true alpha transparency, without the need to cover the bottom with an additional

. Simply use the CSS mask-image property with a linear gradient that fades from black to transparent. The browser should take care of the rest for you. Demo:

.container {
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  height:  150px;
  width: 300px;
  overflow-y: scroll;
}
body {
  background: #09f;
  transition: background 0.5s ease-out;
}
body:hover {
  background: #f90;
}


  Mouse in/out of this demo or scroll down to see that it's true alpha! 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed nisl id lectus viverra faucibus. Cras sed est sit amet turpis placerat consequat. Vestibulum viverra accumsan nisl a dapibus. Quisque mollis porta dictum. Praesent dictum non nisl at rutrum. Nam sem orci, efficitur quis faucibus non, aliquam eget est. In nec finibus ex, quis tristique augue. Duis tristique turpis a nunc sodales tincidunt.
  Morbi vehicula nisi ut lacus ornare, ac tincidunt sapien pellentesque. Aliquam gravida id dolor eget volutpat. In hac habitasse platea dictumst. Aenean ac enim eros. Vivamus augue nunc, interdum vitae pellentesque nec, interdum non turpis. Quisque viverra eget nibh in varius. Vivamus vel euismod velit. Vivamus suscipit lorem et porttitor gravida. Donec non nulla nulla. Duis eget dui sed urna eleifend sagittis.

The best part of this approach is that it's true transparency, instead of faking it by covering your text with a color that matches the background. This allows for scrolling and background images! I change the background color on hover to demonstrate that it's truly transparent.

Browser support is pretty solid, except for IE.

0 讨论(0)

查看其它5个回答