Question

所有

我一直在慢慢拉开一个HTML5模板，并在同一页面上复制粘贴了几次以下的视差部分因为我为视差效果复制了3次，所以我也有与主要版本中定义的相同的背景图像。 CSS

/* ==========================================================================
   Counter Section Style
   ========================================================================== */
.counters {
  background: url(../img/bg1.jpg) fixed;
  position: relative;
}
.counters .facts-item {
  text-align: center;
  color: #fff;
}
.counters .facts-item .icon {
  margin-bottom: 20px;
}
.counters .facts-item .icon i {
  font-size: 50px;
  color: #fff;
}
.counters .facts-item .fact-count h3 {
  font-size: 35px;
  color: #fff;
  margin-bottom: 15px;
}
.counters .facts-item .fact-count h4 {
  font-size: 20px;
  color: #fff;

 <div class="counters section" data-stellar-background-ratio="0.5">
      <div class="overlay"></div>
      <div class="container">
        <div class="row"> 
		 <div class="col-sm-6 col-md-3 col-lg-3">
            <div class="item-boxes wow fadeInDown" data-wow-delay="0.2s">
             <!-- <div class="icon">
                <i class="lnr lnr-pencil"></i>
              </div> -->
			    <a class="nav-link" href="#video-area">
              <h4>SaaS Assurance</h4></a>
              <p></p>
            </div>
          </div>

我遇到的问题是，即使我复制了它们，我仍然希望它们是他们自己的具有不同背景的部分，并且我在Web Dev上的经验有限。我不确定CSS中的类.counters是如何定义的我希望改变的图像是由代表计数器部分

的代码拾取的

全部谢谢

Answer 1

在CSS中， Classes 可以更多而不是一次，所以如果你复制了视差部分三时间，然后应该有三个视差部分具有相同的背景，由 .counters 声明，每个视差部分使用它。

要确保这三个视差区域中的每一个都不会使用相同的背景，请尝试使用 ID ，因为ID只能使用一次和必须具有唯一名称。

当ID和类一起使用时，ID属性应该覆盖元素中使用的任何类所做的任何声明。在这种情况下，您可以为每个视差区域提供一个包含单独背景属性的ID（类似 #paralax-section1 ，2等），所以 .counters's 后台声明将覆盖。

进一步阅读：

CSS Selectors。
Override Class Declarations by Styling ID Attributes来自FreeCodeCamp。

注意：复制粘贴HTML元素时，请确保从开始括号中选择直到结束。

Answer 2

感谢所有回复。我发现类.counters实际上是从上面的代码中调用类计数器部分的图像的问题，它一定是忽略了空间而且该部分让我困惑:)

不确定如何从复制的HTLM，CSS，JS中指定样式

2 个答案: