文章/答案/技术大牛

发布

css背景图不重复

CSS背景图不重复

基础概念

CSS中的background-repeat属性用于控制背景图像的重复方式。默认情况下，背景图像会在水平和垂直方向上重复。

类型

repeat：默认值，图像在水平和垂直方向上重复。
repeat-x：图像仅在水平方向上重复。
repeat-y：图像仅在垂直方向上重复。
no-repeat：图像不重复。

应用场景

单张背景图：当只需要显示一张背景图时，使用no-repeat。
水平或垂直条纹：当需要创建水平或垂直条纹效果时，分别使用repeat-x或repeat-y。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Background Repeat Example</title>
    <style>
        .no-repeat {
            background-image: url('path/to/image.jpg');
            background-repeat: no-repeat;
        }
        .repeat-x {
            background-image: url('path/to/image.jpg');
            background-repeat: repeat-x;
        }
        .repeat-y {
            background-image: url('path/to/image.jpg');
            background-repeat: repeat-y;
        }
        .repeat {
            background-image: url('path/to/image.jpg');
            background-repeat: repeat;
        }
    </style>
</head>
<body>
    <div class="no-repeat" style="width: 300px; height: 200px;"></div>
    <div class="repeat-x" style="width: 300px; height: 200px;"></div>
    <div class="repeat-y" style="width: 300px; height: 200px;"></div>
    <div class="repeat" style="width: 300px; height: 200px;"></div>
</body>
</html>

参考链接

MDN Web Docs - background-repeat

常见问题及解决方法

问题：为什么设置了background-repeat: no-repeat，背景图还是重复？

原因：可能是由于CSS选择器优先级问题，或者有其他CSS规则覆盖了你的设置。
解决方法：
- 确保你的CSS选择器优先级足够高。
- 使用!important来强制应用你的规则，例如：
- 使用!important来强制应用你的规则，例如：
- 检查是否有其他CSS文件或内联样式覆盖了你的设置。

通过以上方法，你可以有效地控制CSS背景图的重复方式，并解决常见的重复问题。

页面内容是否对你有帮助？

有帮助

没帮助

html - body backgorund图像正在重复

html

正如你在这个页面-- --中看到的，在底部，背景图像因为长文本而重复出现。

浏览 1提问于2010-08-25得票数 3

回答已采纳

2回答

img在div内的背景中最大化

css

我已经摆弄这个东西有一段时间了，但是我仍然不知道该怎么做。<div class="itemtemplate" data-win-control="WinJS.Binding.Template"> <img style="-ms-grid-row-span: 2;" src="#" data-win-bind="src: backgroundImage; alt: title&

浏览 1提问于2012-03-14得票数 1

2回答

在调整窗口大小时，如何使背景图像缩放到适合整个窗口？

html、css

我试图让我的背景图像放大，因为我将窗口调整到一个较小的屏幕，以便它占据整个屏幕(高度和宽度)。当我开始的时候，我会调整窗口的大小，背景图像会变得更小并重复。所以我找到了这个CSS，它阻止了图像的重复，并确保它覆盖了屏幕的宽度(但不一定是高度)。.....jpeg"); background-size: cover;现在，当我调整窗口大小时，背景图像会调整大小，并且不会重

浏览 20提问于2017-08-25得票数 0

回答已采纳

5回答

背景重复，选择CSS的重复次数

css

我可以通过CSS选择背景图像重复多少次吗？

浏览 0提问于2011-07-11得票数 1

1回答

在滑块中的图像交叉淡出很好，但我想添加一个背景图像重复模式，也有交叉淡出到另一个图像模式。我受到限制，因为我一直无法找到如何在不破坏插件的情况下将这些背景图像添加为html，所以我正在使用css中的背景图像属性来更改背景，但是它不会褪色，新的背景就会出现。使用css转换在css背景图像上不起作用，当我使用jquery .animate或jquery淡出时，它也不起作用。我来得最近的地方是淡出，然后进入，但这不是我想要的交叉褪色。，所以

浏览 4提问于2013-11-19得票数 1

回答已采纳

2回答

加载一次母版页

javascript、jquery、html、css

有没有什么特别的解决方案，让我只加载一次背景图像，然后对其余的html文件使用相同的背景图像？

浏览 0提问于2013-05-30得票数 1

1回答

背景图像没有填充完整的div大小。

css

下面是应用于div的css： background-size: 100%; height: 200px;} ，底部边框符合整个宽度，但背景图像既不填充全部宽度，也不填充高度，即使没有应用填充或边距。问题是背景图像被重复，每个重复之间都有很小的空间。我已经尝试过不重

浏览 1提问于2013-09-25得票数 3

回答已采纳

1回答

100%窗口的背景图像(并随其调整大小)

javascript、jquery、image

复制件： CSS不允许您设置背景图像的大小，只能设置其重复的方式。(但我想把它拉长) 我认为jQuery是实现这一点的最安全和最快的方式，以克服浏览器不兼容。或者，使用常规的javascript可以快速完成此操作？

浏览 1提问于2009-05-17得票数 3

回答已采纳

1回答

无重复中心vs封面

html、css

两者都达到了与我网站上的背景图片基本相同的效果。据我所知，在结果中没有区别。

浏览 2提问于2015-04-25得票数 0

回答已采纳

5回答

如何在水平方向上重复CSS形状？

html、css、repeat、css-shapes

我想用一个重复的三角形来装饰我页面的底部。图片显示了一个三角形，但我想填充整个水平div。

浏览 0提问于2013-06-21得票数 2

回答已采纳

3回答

CSS背景封面

html、css、mobile、background

我有一个在CSS中完美完成的全屏背景，使用： background-image: url('..我得到我可能需要有一个不同的CSS文件的移动操作系统在那里，但不确定到底是什么问题，我如何为移动全屏图像？

浏览 3提问于2013-09-23得票数 4

1回答

重复图片会增加网站的加载时间吗？

optimization、load-time

我正在尝试优化我的网站的加载时间。在代码的不同位置请求相同的图像会增加加载时间吗？例如，我使用一张图片作为按钮的背景，并在网站的不同位置加载相同的图片。这是一个问题，还是因为文件在所有按钮中都是相同的，所以浏览器只加载一次？如果它是一个问题，我如何优化它？非常感谢!

浏览 0提问于2013-04-01得票数 1

回答已采纳

2回答

导航菜单中的社交图标

css、wordpress

我已经完成了以下步骤：将以下代码添加到style.css中重要；背景-重复:不重复！重要；边距-左:100 no！重要；宽度:50 no；}.菜单-facebook a:hoover {背景：#f5f5f5！重要；背景-重复:不-重复-重要；页边距:100 no！重要；宽度:50 no；}。菜单-instagram{文本缩进：-

浏览 0提问于2014-06-02得票数 0

回答已采纳

3回答

如何使用CSS混合颜色？

html、css

我想要一个有两种颜色的盒子，上面有银色，它应该会慢慢褪色成白色，就像苹果的主页背景一样。我该怎么做？

浏览 3提问于2010-10-16得票数 0

1回答

每个按钮都有相同的图片

html、css

type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script> <meta chars

浏览 0提问于2014-01-02得票数 0

4回答

不拉伸地重复CSS背景图像

html、css

有没有一种方法来创建一个瓷砖背景使用一个重复的图像，而不拉伸和改变大小？我有一个模式，我正在使用作为背景。不过，我希望这是一贯地显示整个网站。当前，模式会正确重复，但会根据容器的大小展开。

浏览 1提问于2018-02-25得票数 0

回答已采纳

1回答

从psd文件创建主题时出现的一些CSS问题

html、css、themes、photoshop

我正在研究如何创建一个没有表格的CSS网页模板从PSD文件开始，并将其编码为HTML + CSS，但我有一些问题。在解释我的问题之前，我先给你看我的结果(这不是最终结果)：正如您所看到的，我在标题中遇到了一个问题，因为主体的重复背景图像(bg.jpg)与#header div (bgheader.jpg)的背景图像不匹配奇怪的是，这个问题只出现在蓝色区域，而不是上面的灰色区域；所有匹配，顶部灰色阴影的颜色匹配，但蓝色区域不匹配。关于重复的图像bg.

浏览 1提问于2013-07-03得票数 0

4回答

重复图像HTML和CSS

html、css

我对如何用html和css得到一个重复的图像有点困惑。下面是我的代码：<head> <link rel="stylesheet" href="style.css" media="screen" /><body> <div id="top_backgroun

浏览 2提问于2012-04-04得票数 0

1回答

如何在不使用CSS的情况下停止在html电子邮件中重复背景图像？

html、css

我尝试在CSS中使用该图片，但Outlook不支持。所以我只是把照片放在body标签里。现在我可以显示图片了，但它正在重复。所以我需要一种方法来停止重复的背景图像在HTML中，而不使用CSS。有什么帮助吗？

浏览 0提问于2014-11-25得票数 0

2回答

限制html页面滚动/去除超出非重复背景图像的部分

html、css、image、background、scroll

假设有一个我想要的页面，但我不希望任何人滚动超过1280px(长度)和800px(宽度)。我有一个非重复的背景图片，通过CSS在这个页面上，但是一些多余的虚无出现在下面&在它的右边。

浏览 0提问于2014-12-05得票数 0

点击加载更多

css背景图不重复