css 如何在图片标签上添加背景色和覆盖内容？

6uxekuva 于 2022-12-24 发布在其他

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

基本上，我试图添加一个背景色和一些文本的图像和中心的内容div。
正如您在屏幕截图中所看到的，目前图像只占屏幕的1/3，但它应该是全宽的。

我试图实现的是下面的截图。

我试图利用background-blend-mode: normal;或应用width:100%或aspect-ratio: 1/1或flex:1，但图像仍然不是全宽。
我的意思是，图像应该与父container具有相同的宽度。
Sandbox Link和下面的代码片段

body {
  margin: 0;
  padding: 0;
}

.container {
  background-color: #13293d;
  overflow: auto;
  display: flex;
  align-items: center;
  position: relative;
  column-gap: 15px;
  width: 100%;
  opacity: 1;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.picture-container {
  opacity: 0.1;
  width: 100%;
  flex: 1;
}

.content {
  opacity: 1;
  background-blend-mode: normal;
}

<div class="container">
      <div class="picture-container">
        <picture>
          <source
            media="(min-width:650px)"
            srcset="https://i.stack.imgur.com/Pm2og.png"
          />
          <img
            src="https://i.stack.imgur.com/Pm2og.png"
            alt="Flowers"
          />
        </picture>
      </div>
      <div class="content">
        <p class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
        </p>
      </div>

任何帮助都将不胜感激

css

来源：https://stackoverflow.com/questions/74870116/css-how-to-add-background-color-and-overlay-content-on-picture-tag

2条答案

按热度按时间

3qpi33ja1#

对于图像使用显示在中心display: flex,margin:0px auto然后图像将显示在中心如果你想显示图像全屏然后使用宽度：100%

赞(0）回复(0）举报 2022-12-24

vcirk6k62#

在css中将img宽度设置为100 vw并删除**“style=“宽度：auto;"**来自html img元素。

lang-css文件

body {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  background-color: #13293d;
  overflow: auto;
  display: flex;
  align-items: center;
  position: relative;
  column-gap: 15px;
  width: 100%;
  opacity: 1;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.picture-container {
  opacity: 0.1;
  width: 100%;
  flex: 1;
}
.picture-container img {
  width: 100vw;
}

.content {
  opacity: 1;
  background-blend-mode: normal;
}
.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

语言-html文件

<div class="container">
    <div class="picture-container">
        <picture>
            <source media="(min-width:650px)" srcset="https://i.stack.imgur.com/Pm2og.png" />
            <img src="https://i.stack.imgur.com/Pm2og.png" alt="Flowers" />
        </picture>
    </div>
    <div class="content">
        <p class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
        </p>
    </div>
</div>

赞(0）回复(0）举报 2022-12-24

我来回答

css 如何在图片标签上添加背景色和覆盖内容？

2条答案

相关问题

热门标签

最新问答