插入背景横幅

Question

我第一次使用UI Semantic。我正在使用官方示例网站上提供的入门主题：http://semantic-ui.com/examples/homepage.html

我正在尝试在横幅中显示背景图片，因此我检查了应用深色背景的位置：

<div class="ui inverted banner-bg vertical masthead center aligned segment ">..</div>

我添加了课程banner-bg以便应用背景图片，但它没有生效 这是我的班级：

  .banner-bg{
    color: rgba(255, 255, 255, 0.9);
    background-image: url(../../images/banner_1.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    }

Answer 1

未应用它的原因是因为CSS使用最具体声明的块中的语句。

主题声明了以下声明的背景：

.ui.inverted.segment, .ui.primary.inverted.segment {
    background: #1B1C1D;
    color: rgba(255, 255, 255, 0.9);
}

所以.ui.inverted.segment比.banner-bg更具体 如何覆盖这个？

您只需要声明它更具体，如.ui.inverted.segment.banner-bg

为了想象这一点，我做了一个短CodePen-Demo
我也会在这里发布演示代码来描述解决方案：

.first.second.third{
  background: black;
  color: white;
}
.first.second.third.bg-banner{
  background: red;
}
.bg-banner{
  background: green;
}

<div class="first second third and so on">Test</div>
<div class="first second third and so on bg-banner">Test 2</div>

所以背景是红色的，甚至你的green语句也会出现。如果你在上面的语句中添加完全相同的类，则背景变为绿色。

关于此主题的非常详细的文章有CSS-Tricks：Specifics on CSS Specificity

Answer 2

给他特定的身高

.banner-bg{
color: rgba(255, 255, 255, 0.9);
background-image: url(../../images/banner_1.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height:500px(as your image size)

}

Answer 3

选择器已经存在。您不必添加任何类。 就这样做：

.ui.inverted.segment, .ui.primary.inverted.segment {
    background: #1B1C1D;
    color: rgba(255, 255, 255, 0.9);
    background: url('http://res.cloudinary.com/wisdomabioye/image/upload/v1462961781/about_vbxvdi.jpg');
}

见下图：