Question

我有一个背景图片，我希望添加一个边框和一个宽度为18cm的白色背景。下面是一个示例：

我们有带边框的背景图片，内部有白色背景。

这是我下面的实现... 我知道我的结果仍然中等，但是如何创建相同的东西呢？我搜索创建带有白色背景的边框...

HTML

<div class="img_reg">
        <div class="contenair_reg">
            <span class="regtxtcolor"><i class="far fa-address-card"> Personal Information:</i></span>
            <p>Please use English letters and numbers in all field for registration before creating an account.</p>
        </div>
    </div>

CSS

.contenair_reg{
  padding-top: 60px; 
  padding-left: 320px;


}

.regtxtcolor{
  font-size: 26px;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  color: #C22312;
  font-weight: bold;

}

我的HTML块可以吗？

Answer 1

嗨，我所做的事情是将

元素包含在.reg_content_container类的div中，以便在其下方添加边框。请运行摘要，谢谢。

body{
  height:100%;
  background:url('https://edmontongazette.com/wp-content/uploads/2018/07/California.jpg');
  background-size:cover;
}

.body_padding{
  padding:60px 30px 0px 30px;
}

.contenair_reg{
  padding:15px;
  background-color:white;
  border-radius:5px;
}

.regtxtcolor {
  font-size: 26px;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  color: #C22312;
  font-weight: bold;
}

.contenair_reg p{
  margin-bottom:8px;
}

.reg_content_container{
  border-bottom:3px solid #C22312;
}

<html>

<body>
  <div class="body_padding">
    <div class="contenair_reg">
      <span class="regtxtcolor"><i class="far fa-address-card"> Personal Information:</i></span>
      <div class="reg_content_container">
      <p>Please use English letters and numbers in all field for registration before creating an account.</p>
      </div>
    </div>
  </div>
</body>

</html>

Answer 2

您可能需要设置背景颜色和边距。使用填充物作为背景，而不是与容器分开。

.contenair_reg

此外，您还需要在p标签底部添加边框，请尝试使用类似codepen

的方法

.img_reg {
  background-image: url(https://static1.squarespace.com/static/5459ec52e4b04d305f68f1ed/t/548a8e17e4b0dd3cb0247e7b/1418366488991/?format=2500w);
  width: 100vw;
  height: 100vh;
}

.contenair_reg{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 20%;
  padding: 30px;
  background-color: white;
  transform: translate(-50%, -50%);
  border-radius: 6px;

}

.regtxtcolor{
  font-size: 26px;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  color: #C22312;
  font-weight: bold;

}

p{
  padding-bottom: 5px;
  border-bottom: 2px solid #C22312;
}

Answer 3

.box{
  background:url('https://preview.ibb.co/kv4XHU/66.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  height: 300px;

}

.box { padding: 150px 35px 0 35px; }
.box-content {
  padding:15px;
  background-color: #ffffff;
  border-radius: 5px;
}
.box-icon {
  font-size: 24px;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  color: #C22312;
  font-weight: 700;
}
.box-content p { margin-bottom: 12px; }
.box-text{  border-bottom:3px solid #C22312; }

  <div class="box">
    <div class="box-content">
      <span class="box-icon"><i class="far fa-address-card"> Personal Information:</i></span>
      <div class="box-text">
      <p>Please use English letters and numbers in all field for registration before creating an account.</p>
      </div>
    </div>
  </div>

背景图像和边框

3 个答案: