html - 调整窗口大小时重复背景图像(背景重复是不重复)

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;。