Question

我目前正在努力将<hr>元素移到我的div元素后面。我尝试过定位，但没有帮助。它仍然可以通过白色部分看到，可能是因为它们是透明的。

也许我的想法如何实现这一点是错误的。这是一个工作示例：Fiddle

我想创建此菜单：

以下是我使用的代码：

.intro-text h1 {
    font-weight: 700;
    color: #ffa600;
    font-size: 22px;
    margin-bottom: 0;
}
.intro-text hr#myh {
    margin: 0;
    width: 100%;
    background-color: #ffa600;
}
.intro-text div#myimgdiv {
    margin-top: -20.5px;
    text-align: center;
}
.intro-text span {
    margin: 0 1.5vw;
}
.intro-text img {
    border-radius: 50%;
    width: 40px;
}

.make-border {
    box-shadow: 0 0 0 2px #ffa909, 0 0 0 2px #ffffff;
}

和html：

<div class="col-sm-12 intro-text">
    <h1>Zimmer einstellen</h1>
    <hr id="myh"> 

    <div id="myimgdiv">
        <span id="step1">
            <img class="make-border" src="http://imgur.com/oq54SFb.png">
        </span>
        <span id="step2">
            <img src="http://imgur.com/oq54SFb.png"> 
        </span>
        <span id="step3">
            <img src="http://imgur.com/oq54SFb.png">
        </span>
        <span id="step4">
            <img src="http://imgur.com/oq54SFb.png">
        </span>
        <span id="step5">
            <img src="http://imgur.com/oq54SFb.png">
        </span>
    </div>
</div>

Answer 1

在你的make-border课程中，添加

background-color: #f0f0f0;

（或与页面背景颜色相同的任何颜色）

Answer 2

您可以为元素提供背景颜色（img的径向渐变或div的颜色）

您还可以更新边框和/或颜色以绘制hr https://jsfiddle.net/tbex4nnc/5/

.intro-text h1 {
  font-weight: 700;
  color: #ffa600;
  font-size: 22px;
  margin-bottom: 0;
}

.intro-text hr#myh {
  margin: 0;
  width: 100%;
  border: solid 1px;
  color: #ffa600;
}

.intro-text div#myimgdiv {
  margin-top: -20.5px;
  text-align: center;
}

.intro-text span {
  margin: 0 1.5vw;
}

.intro-text img {
  border-radius: 50%;
  width: 40px;
}

.make-border {
  box-shadow: 0 0 0 2px #ffa909;
  background: white;
}

img {
  background: radial-gradient(circle at center, white 10px, transparent 10px);
}

<div class="col-sm-12 intro-text">

  <h1>
    Zimmer einstellen
  </h1>

  <hr id="myh">

  <div id="myimgdiv"> <span id="step1"> <img class="make-border" src="http://imgur.com/oq54SFb.png">
</span> <span id="step2"> <img src="http://imgur.com/oq54SFb.png"> </span> <span id="step3"> <img src="http://imgur.com/oq54SFb.png"> </span> <span id="step4"> <img src="http://imgur.com/oq54SFb.png"> </span> <span id="step5"> <img src="http://imgur.com/oq54SFb.png"> </span>
  </div>
</div>

Answer 3

执行此操作的一种方法是使两个图像的背景颜色与浅灰色页面背景相匹配。我会使每个编号的图像都像这个图像，背景为灰色：http://imgur.com/a/K2DbD。然后添加这行css：

.make-border {
background-color: #f3f5f6;
}

Answer 4

我改变了

 .intro-text hr#myh {
     margin: 0;
     width: 100%;
     background-color: #ffa600;
 }

到

.intro-text hr#myh {
    margin: 0;
    width: 100%;
    border-top: 1px solid #ffa909; // changed from background-color to border-top
}

并添加背景

.make-border {
    box-shadow: 0 0 0 2px #ffa909, 0 0 0 0px #ffffff;
    background-color: #ffffff;
}

CSS如何使<hr />不覆盖<div>

4 个答案: