Question

In this example，div的边框顶部有一个数字。为了说清楚，我希望用数字覆盖哪个边界部分，我也给了这个数字的边界。当然，我们可以为数字提供背景颜色，但是身体的背景图像正在被隐藏。我们怎样才能隐藏数字透明度的边界？

HTML：

<div class="reg-step first-step">
   <span class="step-number">1</span>
   <img src="" alt="Register">
   <h1>Register</h1>
   <div class="steps-separator"></div>
   <p>Lorem ipsum dolor sit amer, consetetur sed iam nonumy eirmod tempor invidunt ut labore et dolore magna aliquayam erat, sed diam vo</p>
</div>

CSS：

body{ 
  background: blue;
  padding-top: 30px;
  background-image: url('https://pbs.twimg.com/profile_images/993504415/css_400x400.png')
}
.reg-step {
    width: 240px;
    height: 325px;
    border: 3px solid white;
    color: white;
    position: relative;
    text-align: center;
    padding: 0px 7px;
}
.reg-step h1 {
    font-size: 14px;
    text-transform: uppercase;
}
.reg-step p {
    font-size: 11px;
}
.reg-step img {
    display: block;
    margin: 10px auto 20px;
}
.reg-step .step-number {
    font-size: 40px;
    margin: 0 auto;
    display: inline-block;
    position: relative;
    top: -23px;
    width: 50px;
    border: 1px solid black;
    background-color: blue;
}
.reg-step .steps-separator {
    width: 90%;
    margin: 20px auto;
    height: 1px;
    background-color: white;
    padding: 0px 7px;
}

期望的结果如下所示：

Answer 1

您可以使用

<fieldset>

为此。

查看小提琴 https://jsfiddle.net/sepyzund/

<强> HTML：

<fieldset class="reg-step first-step">
    <legend class="step-number">1</legend>
    <img src="" alt="Register">
    <h1>Register</h1>
    <div class="steps-separator"></div>
    <p>Lorem ipsum dolor sit amer, consetetur sed iam nonumy eirmod tempor invidunt ut labore et dolore magna aliquayam erat, sed diam vo</p>
</fieldset>

<强>的CSS：

body{ 
  background: blue;
  padding-top: 30px;
  background-image: url('https://pbs.twimg.com/profile_images/993504415/css_400x400.png')
}
.reg-step {
    width: 240px;
    height: 325px;
    border: 3px solid white;
    color: white;
    position: relative;
    text-align: center;
    padding: 0px 7px;
}
.reg-step h1 {
    font-size: 14px;
    text-transform: uppercase;
}
.reg-step p {
    font-size: 11px;
}
.reg-step img {
    display: block;
    margin: 10px auto 20px;
}
.reg-step .step-number {
    font-size: 40px;
    display: block;
    margin: 0 auto;
    width: 50px;
    border: 1px solid black;
}
.reg-step .steps-separator {
    width: 90%;
    margin: 20px auto;
    height: 1px;
        background-color: white;
    padding: 0px 7px;
}

Answer 2

如果您想要颜色透明，可以写为color: rgba(255, 255, 255, 0.5);这里最后一个参数 alpha 是您的透明度级别。您可以在 0 和 1 之间设置透明度。

Answer 3

我想到的第一个想法。对于底部边框使用.reg-step:after等伪元素，在border-image使用.reg-step作为棘手的顶部（以及左侧和右侧）。检查一下：

＆＃13;

body{ 
  background: blue;
  padding-top: 30px;
  background-image: url('https://pbs.twimg.com/profile_images/993504415/css_400x400.png')
}
.reg-step {
    width: 240px;
    height: 325px;
    color: white;
    position: relative;
    text-align: center;
    padding: 0px 7px;
  
    border: 3px solid;
    border-image:   linear-gradient(to right, white 40%, transparent 40%,  transparent 60%, white 60%) 1;
}
.reg-step:after {
  content: " ";
  position:absolute;
  top:0px; left:0px;
  width:100%;
  height:100%;
  border-bottom: 3px solid white;
}
.reg-step h1 {
    font-size: 14px;
    text-transform: uppercase;
}
.reg-step p {
    font-size: 11px;
}
.reg-step img {
    display: block;
    margin: 10px auto 20px;
}
.reg-step .step-number {
    font-size: 40px;
    display: block;
    margin: 0 auto;
    display: inline-block;
    position: relative;
    top: -23px;
    width: 50px;
    border: 1px solid black;
}
.reg-step .steps-separator {
    width: 90%;
    margin: 20px auto;
    height: 1px;
    background-color: white;
    padding: 0px 7px;
}

＆＃13;

<div class="reg-step first-step">
  <span class="step-number">1</span>
  <img src="" alt="Register">
  <h1>Register</h1>
  <div class="steps-separator"></div>
  <p>Lorem ipsum dolor sit amer, consetetur sed iam nonumy eirmod tempor invidunt ut labore et dolore magna aliquayam erat, sed diam vo</p>
</div>

＆＃13;

如何用元素覆盖一块边框？

3 个答案: