css 将背景图像添加到flex div的底部[重复]

pu82cl6c 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(110)

此问题已在此处有答案：

Add background image to the bottom of div（4个答案）
4天前关闭。
截至4天前，社区正在审查是否重新开放此问题。
我试图在Flex div中添加一个底部背景，使其变成这样：

底部背景是以下剪辑：

但是底部的背景并没有显示出来。

.group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.block {
  flex: 25%;
}

@media only screen and (max-width: 600px) {
  .block {
    flex: 50%;
  }
}

.main, .block {
  display: flex;
  flex-grow: 1;
}

.main {
  padding: 10px;
}

.text {
  flex-grow: 1;
  background-color: green; 
  padding: 10px;
}

.text::after {
  background: transparent url("https://i.stack.imgur.com/qN0S5.png") no-repeat center bottom / 100% auto;
}

<div class="group">
    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
    </div>

    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum.</div>
        </div>
    </div>

    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
    </div>

    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum dolor sit amet.</div>
        </div>
    </div>
</div>

怎么到这？

css

来源：https://stackoverflow.com/questions/76514358/add-background-image-to-bottom-of-flex-div

2条答案

按热度按时间

drnojrws1#

使用position、content、padding-top、margin-bottom。
解释起来太罗嗦了，有什么不明白的你可以问我

.group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.block {
  flex: 25%;
}

@media only screen and (max-width: 600px) {
  .block {
    flex: 50%;
  }
}

.main, .block {
  display: flex;
  flex-grow: 1;
}

.main {
  padding: 10px;
}

.text {
  flex-grow: 1;
  background-color: green; 
  padding: 10px;
  /* add */
  position: relative;
  margin-bottom: 18.83408071748879%;
  /* /add */

}

.text::after {
  /* add */
  content: "";
  width: 100%;
  padding-top: 18.83408071748879%;
  position: absolute;
  top: 100%;
  left: 0;
  /* /add */
  background: transparent url("https://i.stack.imgur.com/qN0S5.png") no-repeat center bottom / 100% auto;
}

<div class="group">
    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
    </div>

    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum.</div>
        </div>
    </div>

    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
    </div>

    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum dolor sit amet.</div>
        </div>
    </div>
</div>

赞(0）回复(0）举报 2023-06-25

jq6vz3qz2#

您忘了为after和.text：after添加位置和内容，必须具有高度和宽度才能显示背景图像。
你可以检查下面的代码。
还有另一种方法使用clip-path来获取更多的访问链接https://css-tricks.com/exploring-the-css-paint-api-rounding-shapes/

.group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.block {
  flex: 25%;
}

@media only screen and (max-width: 600px) {
  .block {
    flex: 50%;
  }
}

.main, .block {
  display: flex;
  flex-grow: 1;
}

.main {
  padding: 10px;
}

.text {
  flex-grow: 1;
  background-color: green; 
  padding: 10px;
  position:relative;
}

.text::after {
  width:100%;
  content:'';
  left:0;
  height:35px;
  bottom:-25px;
  position:absolute;
  background: transparent url("https://i.stack.imgur.com/qN0S5.png") no-repeat center bottom / 100% auto;
}

<div class="group">
    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
    </div>

    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum.</div>
        </div>
    </div>

    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
    </div>

    <div class="block">
        <div class="main">
            <div class="text">Lorem ipsum dolor sit amet.</div>
        </div>
    </div>
</div>

赞(0）回复(0）举报 2023-06-25

我来回答

css 将背景图像添加到flex div的底部[重复]

2条答案

相关问题

热门标签

最新问答