如何停止在 CSS 中重复图像？ [复制]答案

【问题标题】：How to stop repeating images in CSS? [duplicate]如何停止在 CSS 中重复图像？ [复制]
【发布时间】：2020-09-06 03:33:08
【问题描述】：

如何在 CSS 中停止重复图像？请帮忙，

CSS 代码

header{
  background-image: url(originalMattress.jpg);
  text-align: center;
  padding: 5px;
  height: 450px; 
}

HTML 代码

<header>
    <p class="top-liner">over 35,000 5* reviews</p>
    <h1>This is what award-wining comfrom feels like</h1>
    <a href="#" class="main-button">Shop for mattresses </a>
    <p class="footer-text">According to capers global onsite customer reviews</p>
</header>

【问题讨论】：

你试过background-repeat: none吗？
这能回答你的问题吗？ Repeating CSS background images without stretching

标签： html css background-image

【解决方案1】：

将background-size 属性设置为cover 这将使您的背景适合其容器，并将background-repeat 设置为no-repeat 这将防止您的背景重复以下是一个

示例

header{
    background-image: url(originalMattress.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    padding: 5px;
    height: 450px; 
}

<header>
    <p class="top-liner">over 35,000 5* reviews</p>
    <h1>This is what award-wining comfrom feels like</h1>
    <a href="#" class="main-button">Shop for mattresses </a>
    <p class="footer-text">According to caspers global onsite customer reviews</p>
</header>

【讨论】：

【解决方案2】：

CSS background-repeat 是您正在寻找的。如果您希望背景图像完全不重复，请使用background-repeat: no-repeat;。

还有其他选择，所以我建议您查看The MDN documentation about the background-repeat property

祝你好运！

【讨论】：

【解决方案3】：

您需要设置background-repeat 属性。

为了防止背景重复，您可以将 background-repeat 设置为 no-repeat。

CSS 代码

header{
  background-image: url(originalMattress.jpg);
  background-repeat: no-repeat;
  text-align: center;
  padding: 5px;
  height: 450px; 
}

资源：https://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-repeat_no-repeat

【讨论】：