Question

我需要为一个块组成一个背景，它由两个相等的部分组成：顶部应该是透明的，底部应该是一个模式。块的确切高度未知。而且我无法使用no-repeat，因为在底部，图片应该根据需要重复多次以填充它。

一切皆有可能吗？

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

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

Answer 1

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

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 2

你可以将绝对div放在实际内容之下，你可以将它分成两部分：一部分透明，一部分带图像。

library(dplyr)
df %>%
   group_by(y) %>%
   mutate(z = n())

位置包装器和内容相关。让包装器浮动，让.content浮动在包装器中。这种方式包装器将随内容延伸。现在你可以将背景绝对定位，顶部，底部，左侧和右侧0.其余的很容易.. :)）

Answer 3

在某种程度上，这可以解决css中的问题：

.imageDiv{
    padding-top:50%;
    background-clip: content-box;
}

显然，将文本放在上半部分不能直接在这个div中应用，但这对我正在做的事情来说已经足够了。要获得上半部分的文本，最简单的解决方案似乎是拥有一个容器div和两个内部div，一个用于图像，另一个用于文本。然后通过应用绝对的css postion将内部div叠加在彼此的顶部，并将它们拉伸到容器的整个尺寸，左，右，顶部，底部= 0;

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

3 个答案: