我做了一个英雄部分,内容与边框重叠.这是它的样子:
我想删除该灰色区域以使其透明并使背景可见.但正如你可以看到它在边界重叠.所以我不希望看到边界成为罢工.内容和图像是动态的,因此宽度可能会改变.
HTML
We make your website beautiyul & usable
— Citation, ABC Inc
CSS
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900);
body {
background: url('https://source.unsplash.com/category/nature') no-repeat center center #333;
color:#FFF;
font-family: "Playfair Display", Georgia, serif;
background-size:cover;
}
.wrap {
max-width:1200px;
margin:0 auto;
padding:130px 20px;
}
.border {
border:solid 10px #FFF;
text-align:center;
}
.attr {
position:relative;
top:-45px;
font-size:20px;
display:block;
}
.hero-title {
font-weight:700;
font-size:90px;
text-align:center;
margin:0 50px;
padding:0;
position:relative;
top:-75px;
background:#8b8b8b;
display:inline-block;
}
寻找仅限CSS的解决方案.任何帮助,将不胜感激.提前致谢.