Question

我正在尝试使用以下代码在时间轴视图中显示事件：

HTML

<div class="panel-body">
    <ul class="timeline">
        <li>
            <div class="timeline-panel">
                <div class="timeline-heading">
                    <h4 class="timeline-title">Timeline Event</h4>
                    <p>
                        <small class="text-muted"><i class="fa fa-time"></i> 11 hours ago via Twitter</small>
                    </p>
                </div>
                <div class="timeline-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel justo eu mi scelerisque vulputate. Aliquam in metus eu lectus aliquet egestas.</p>
                </div>
            </div>
        </li>
        <li class="timeline-inverted">
            <div class="timeline-panel">
                <div class="timeline-heading">
                    <h4 class="timeline-title">Timeline Event</h4>
                </div>
                <div class="timeline-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel justo eu mi scelerisque vulputate. Aliquam in metus eu lectus aliquet egestas.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel justo eu mi scelerisque vulputate. Aliquam in metus eu lectus aliquet egestas.</p>
                </div>
            </div>
        </li>
        <li>
            <div class="timeline-panel">
                <div class="timeline-heading">
                    <h4 class="timeline-title">Timeline Event</h4>
                </div>
                <div class="timeline-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel justo eu mi scelerisque vulputate. Aliquam in metus eu lectus aliquet egestas.</p>
                </div>
            </div>
        </li>
    </ul>
</div>

CSS在小提琴中更新。

我正在尝试为弹出窗口添加背景;背景颜色目前是白色的。我试图添加背景颜色属性，但是箭头背景没有反映。

我尝试为此CSS添加背景色：

.timeline > li > .timeline-panel {
    background-color: #008000;
    border: 1px solid #D4D4D4;
    border-radius: 2px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.176);
    float: left;
    padding: 20px;
    position: relative;
    width: 36%;
}

预期输出：

enter image description here

有人可以在这里投光吗？谢谢！

jsfiddle

Answer 1

DEMO

.timeline-panel {
    background-color:red!important;
}
.timeline > li > .timeline-panel:after {
    border-left:14px solid red!important;
    border-right: 0 solid red!important;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
    border-left:14px solid #fff!important;
    border-right-width: 14px!important;
    border-left-width: 0!important;
}

如果您正确地订购了规则和/或相应地修改了值，则不需要!important，但它就在那里，因此规则显示在页面顶部。 < / p>

Answer 2

这里的关键是箭头的背景颜色。右侧的li项目具有类.timeline-inverted，这就是我们用来为左箭头提供不同CSS的方法。

<强> Working JSFiddle

.timeline > li > .timeline-panel {
    background-color:green;
}
.timeline > li > .timeline-panel:before {
    border-left: 15px solid green;
}

.timeline > li > .timeline-panel:after {
    border-left: 14px solid green;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
    border-right: 14px solid green;
}

Answer 3

您确定CSS已被使用。我知道某些版本的IE不喜欢/理解父/子运算符“＆gt;”

http://forums.techguy.org/web-design-development/596886-css-operator-question.html

即使Windows资源管理器预览也无法处理它们

将其更改为：

.timeline li .timeline-panel { ... }

并查看是否已使用。

如何为CSS三角形添加背景颜色？

3 个答案: