插入背景横幅

Question

我正在使用 UI Semantic for the first time. I'm using the starter theme as given on the official example website: http://semantic-ui.com/examples/homepage.html

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

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

我添加了 class banner-bg 以应用背景图像，但它没有生效。
这是我的 class:

  .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

给他具体的身高

.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 2

之所以没有应用它，是因为 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
我将 post 演示代码也在这里描述解决方案：

.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-技巧：Specifics on CSS Specificity

Answer 3

选择器已经为您准备好了。您不必添加任何 class。只需这样做：

.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');
}

见下图：

插入背景横幅

Inserting a background banner

html

css

semantic-ui