为什么不应用这些 CSS 规则

Question

我试图制作这个视差网站。 在 CSS 中，我正在为.image1定义属性。 所以我写下了属性，然后在它下面我再次为相同的 class .image1写了一些属性。 但仅应用了 ~ 不透明度、position（从第 1 次开始）和其他定义的属性（从第 2 次开始）。 我使用 Inspect Element 检查了它，所有其他属性都被削减了。 我不明白为什么会这样。 请帮我。

 * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; font-family: 'Lato', sans-serif; font-weight: 400; line-height: 1.8em; color: #666; }.image1 { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; opacity: 0.70; }.image1 { background: url('https://jolly-kalam-23776e.netlify.app/parallaxsite/img/image1.jpg'); min-height: 100%; }.text-box-image1 { position: absolute; /* To bring that box in center */ top: 50%; left: 50%; transform: translate(-50%, -50%); }.text-image1 { font-size: 27px; letter-spacing: 8px; color: white; background-color: #111; padding: 20px; }.section-one { padding: 50px 80px; }.section-one.heading { text-align: center; letter-spacing: 1px; margin: 20px; } p { text-align: center; font-size: 17px; }

 <div class="image1"> <div class="text-box-image1"> <span class="text-image1">PARALLAX WEBSITE</span> </div> </div>

Answer 1

我认为您需要将背景图像称为“背景图像”。 您正在单独声明背景属性。 或者你可以这样写：

 * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; font-family: 'Lato', sans-serif; font-weight: 400; line-height: 1.8em; color: #666; }.image1 { background: url('https://jolly-kalam-23776e.netlify.app/parallaxsite/img/image1.jpg') no-repeat fixed center center; background-size: cover; min-height: 100%; opacity: 0.70; position: relative; }.text-box-image1 { position: absolute; /* To bring that box in center */ top: 50%; left: 50%; transform: translate(-50%, -50%); }.text-image1 { font-size: 27px; letter-spacing: 8px; color: white; background-color: #111; padding: 20px; }.section-one { padding: 50px 80px; }.section-one.heading { text-align: center; letter-spacing: 1px; margin: 20px; } p { text-align: center; font-size: 17px; }

 <div class="image1"> <div class="text-box-image1"> <span class="text-image1">PARALLAX WEBSITE</span> </div> </div>