Question

拥有固定图片时是否需要background: no-repeat;？

我读到，在放置任何背景图片时，默认情况下它会重复。

即使你没有在屏幕上看到它，它是否会被重复，即使在固定的图像上也是如此？

您是否需要指定无重复？

图像尺寸为180 x 180。

＆＃13;

<style>
      #playButton4 {
        border: 3px solid #0059dd;
        width: 260px;
        height: 194px;
        cursor: pointer;
        background-color: black;
      }

      .img2 {
        background: url(https://i.imgur.com/4HJbzEq.png);
        background-repeat: no-repeat;
        width: 180px;
        height: 180px;
        margin: 7px 40px;
      }

    </style>

    <div id="playButton4" onclick="">

      <div class="img2"></div>
    </div>

＆＃13;

Answer 1

只要元素的大小超过background-repeat的大小，

background-image属性就相关。如果您的元素发生从不，则指定background-repeat是死代码。

如果在任何情况下，您的元素可能会大于background-image（在任一方向上）并且您不希望重复图像，则应将其保留。

作为旁注，background是一个速记属性，其中包含background-repeat，因此：

background: url(https://i.imgur.com/4HJbzEq.png) no-repeat;

完全相当于

background-image: url(https://i.imgur.com/4HJbzEq.png);
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;

，它将“死代码”减少到只有10个字符。

Answer 2

我认为您需要它以避免重复图像，您的图像不会重复，因为您将图像分辨率设置为相同，如果您将宽度设置为100％而不使用background-repeat: no-repeat;，您将重复图像。

Answer 3

是的，最好使用no-repeat，除非您想要平铺背景图片以制作背景图案或使背景响应。

参考：https://blogs.adobe.com/creativecloud/best-practices-for-background-images-your-getting-started-guide/

在您的情况下，您无需使用no-repeat，因为您已为容器<div>提供了固定尺寸（与图像尺寸相同）。稍后，如果您希望动态更改（增加）容器的尺寸以使其响应，那么您肯定需要no-repeat。

是背景：不重复;你有一个固定大小的图像需要吗？

3 个答案: