如何防止背景图像平铺？答案

【问题标题】：How to prevent background image from tiling?如何防止背景图像平铺？
【发布时间】：2023-02-10 01:16:29
【问题描述】：

<div style="background-image: url('https://i.ibb.co/v1B855w/bg15.png'); color: #000000; background-color: #000000; background-attachment: fixed; text-align: center;"><img src="https://i.ibb.co/L6zQY0S/name6.png" /></div>

我想让背景图像显示整个宽度而不是平铺。

尝试将背景拉伸到 100%，但没有用

【问题讨论】：

background-repeat:no-repeat; 用于“不平铺”，background-size: cover 确保图像填充整个元素而不会按比例扭曲。

标签： html css

【解决方案1】：

.bg {
  background-image: url('https://i.ibb.co/v1B855w/bg15.png');
  color: #000000;
  background-size:cover;
  background-color: #000000;
  background-attachment: fixed;
  text-align: center;
  background-repeat:no-repeat;
}

<div class="bg">
  <img src="https://i.ibb.co/L6zQY0S/name6.png" /> 
</div>

【讨论】：

【解决方案2】：

您还可以使用 background-size:100% 100%; 值来完全拉伸背景图像。

.bg {
  background-image: url('https://i.ibb.co/v1B855w/bg15.png');
  color: #000000;
  background-size:100% 100%;
  background-color: #000000;
  background-attachment: fixed;
  text-align: center;
  background-repeat:no-repeat;
}

<div class="bg">
    <img src="https://i.ibb.co/L6zQY0S/name6.png" /> 
  </div>

【讨论】：