CSS - 制作半透明、半图像的背景

Question

我需要为一个由两个相等部分组成的 block 制作背景:顶部应该是透明的，底部应该用图案填充。 block 的确切高度未知。而且我不能使用 no-repeat 因为在底部，图像应该根据需要重复多次以填充它。

这一切都可能吗？

(例如，制作从完全透明到图像背景的线性渐变会很棒，但据我所知，没有这样的东西。)

这就是我想要的，大约:https://maaaks.ru/images/screens/rect4140.png

Answer 1

我可能会像这样使用定位的伪元素:

div {
  height: 250px;
  border: 2px solid green;
  position: relative;
  background-color: rgba(255, 0, 0, 0.25);
}
div::before {
  content: '';
  position: absolute;
  height: 50%;
  top: 50%;
  width: 100%;
  background-image: url(http://lorempixel.com/output/abstract-q-c-25-25-4.jpg);
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil minus sed magnam, sint nam nisi aut ad consequuntur corrupti assumenda, aliquid doloremque modi voluptatem ex!</p>
</div>