Question

＆＃13;

let filtered = data.filter({$0.contains("test")})

＆＃13;

#gtco-header {
  position: absolute;
  top: 0;
  background: #4d4d4d;
}
@media screen and (max-width: 992px) {
  #gtco-header.gtco-cover {
    height: inherit !important;
    padding: 3em 0 !important;
  }
}
#gtco-header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  background-image: url(iamges/68410027-dota-2-logo-wallpapers.jpg);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

＆＃13;

我试图让图像适合我得到的标题框，但出于某种原因，无论我做什么，它都不会改变。

如我的html和css的两张图片（和代码块）中所示，我有一个背景色。我在CSS中有一个背景图片，我在HTML中尝试了一个（在图片中，两个代码都在使用，但我已经尝试了两个没有一个和另一个）。

我在主文件夹中有一个图像文件夹，其中HTML文件包含我使用的图片，其中一些可以使用但不是我下载的新图片。

我尝试通过下载链接使用它们，通过文件夹链接，使用网址和网络链接，但没有运气。

有人有个主意吗？这是由于本周五。

Answer 1

您实际上不需要高度，因为您已经使用position: absolute和top，right，bottom确定了元素的“大小”， left - 与父元素的height: 100%和width: 100%基本相同。

确保删除.gtco-header的背景，这将覆盖图像。

body,
html {
  margin: 0;
}

#gtco-header {
  position: absolute;
  top: 0;
  /* background: #4d4d4d; */
}

@media screen and (max-width: 992px) {
  #gtco-header.gtco-cover {
    height: inherit !important;
    padding: 3em 0 !important;
  }
}

#gtco-header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background: rgba(0, 0, 0, 0.2); */
  background: url(//unsplash.it/500/500/) no-repeat;
  background-size: cover;
  z-index: -1;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

<header id="gtco-header" class="gtco-cover gtco-cover-md" style="background-image: url(http://www.guoguiyan.com/data/out/59/68410027-dota-2-logo-wallpapers.jpg)" data-stellar-background-ratio="0.5">
  <div class="overlay"></div>
  <div class="gtco-container">
    <div class="row row-mt-15em">
      <div class="col-md-12 mt-text text-center animate-box" data-animate-effect="fadeInUp">
        <h1>We Build <strong>Branded Platforms</strong></h1>
        <h2>Far far away, behind the word mountains, far from the countries Vokalia.</h2>
        <div class="text-center">
          <a href="https://www.youtube.com/watch?v=2kr7KDCsIws" class="btn btn-primary btn-lg popup-video">Watch the video</a>
        </div>
      </div>
    </div>
  </div>
</header>

Answer 2

尝试使用

background-size:100% 100%;
height:300px; 
background-image: url("your image url");
background-repeat:no-repeat;

我的背景图片不起作用

2 个答案: