CSS

Question

有没有办法用CSS实现下面的设计？

transparent gradient example

它基本上是一个带有 background-image: url("...") 和内部 div 的容器，在底部逐渐变成透明。

我知道如何使用 linear-gradient(transparent, white) 对单色背景进行淡出，但不会像上面的示例那样使用背景图像。内部 div 的内容可能是任何东西，不仅仅是文本。

Answer 1

试试这个

内部DivCSS属性

background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.5));

Answer 2

好的，我找到了解决方案：mask-image: -webkit-gradient(...)

虽然浏览器支持 not optimal...

示例：

body {
  background: url('https://images.unsplash.com/photo-1531315630201-bb15abeb1653?w=500') center no-repeat;
  background-size: cover;
}

div {
  width: 200px;
  height: 150px;
  overflow: hidden;
  background: cyan;
  -webkit-mask-image: -webkit-gradient(linear, center top, center bottom, 
   color-stop(0.50,  rgba(0,0,0,1)),
   color-stop(1.00,  rgba(0,0,0,0)));
  mask-image: -webkit-gradient(linear, center top, center bottom, 
   color-stop(0.50,  rgba(0,0,0,1)),
   color-stop(1.00,  rgba(0,0,0,0)));
}

<div>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

更多信息：https://css-tricks.com/clipping-masking-css/

CSS - 将 div 淡入背景图像

CSS - Fade div into background image

gradient

fade

transparent

background-image