Question

我的背景图片重复，即使在css中我有background-repeat: no-repeat;

为什么会这样？

当我调整窗口大小时会发生这种情况。

我的背景电视是视频图层。

HTML：

<div class="tv">
   <video width="98%" height="78%" controls="controls">
          <source src="img/showreel.mp4" type="video/mp4">
   </video>
</div>

CSS：

.tv{
  text-align: center;
  position:relative;
  background-repeat: no-repeat;
  background: url(img/tv.png) center center;
  background-size: 100%;
  height: 650px;
  width: 100%;
}

.showreel-video{
  position:relative;
  margin-top: -40px;
}

Answer 1

您的background-repeat: no-repeat;指令当前被background:...;属性覆盖，因为后者也接受重复/不重复指令，并在之后放置。

因此，您必须在背景属性中添加no-repeat，如下所示：

background: url(http://lorempixel.com/400/200/) center center no-repeat;

或在后台指示后移动background-repeat: no-repeat;。

Answer 2

只需删除background-repeat并将背景设置如下：

 background: url(http://lorempixel.com/400/200/) center center no-repeat;

演示：http://jsbin.com/cacofotaqo/1/

Answer 3

在你的css中，后台重复被你的背景声明的默认值覆盖，因为CSS从上到下处理规则。如果您切换背景重复和背景，那么它将起作用：

background: url(img/tv.png) center center;
background-repeat: no-repeat;
background-size: 100%;

调整窗口大小时重复背景图像（背景重复不重复）

3 个答案: