Question

是否可以使用CSS实现以下设计？

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

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

Answer 1

好的，我找到了解决方法：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/

Answer 2

尝试

内部Div CSS属性

library("data.table")

D <- fread(
"Toss   Round  Outcome  Count
1      1      H        1
2      1      H        2
3      1      H        3
4      1      H        4
5      1      T        1
6      2      T        1
7      2      T        2
8      2      H        1")

D[, C:=1:.N, .(Round, Outcome)][]

CSS-将div淡入背景图像

2 个答案: