背景-图像和边框
背景-图像和边框
提问于 2018-09-27 07:46:29
我有一个背景图片，我希望在下面的例子中添加一个边框和一个宽度为18cm.Here的白色背景：
我们有一个背景图像，里面有一个边框和一个白色的背景。
下面是我的体会。我知道我的结果仍然很平庸，但如何才能创造出同样的东西呢？我搜索创建一个背景为白色的边框...
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代码块是正常的吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-09-27 07:56:34
我所做的是将
元素封装在一个带有.reg_content_container类的div中，这样我就可以在它下面添加一个边框。请运行snippet，谢谢。
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>
Stack Overflow用户
发布于 2018-09-27 08:33:06
您可能需要设置背景色和页边距。使用填充作为背景，而不是独立于它的容器。
.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;
}Stack Overflow用户
发布于 2018-09-27 14:07:12
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52527469
复制相关文章
相似问题