我有一张背景图片，上面有一个 h1 和段落标签。我希望在不影响页眉的填充或边距的情况下在 h1 标记周围创建一个边框。当我创建边框时，它围绕着文本 和 顶部填充。有没有办法只在文本周围应用边框？
完整代码在 JSFiddle here .
CSS 代码在这里:
header {
background-image: url("https://images.pexels.com/photos/8263/pexels-
photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb");
height: 500px;
padding: 0;
margin: 0;
background-attachment: fixed;
background-size: cover;
text-transform: capitalize;
}
h1 {
color: black;
text-align: center;
display: block;
font-size: 50px;
padding-top: 180px;
margin: 0;
}
最佳答案
这就是你想要的吗？
下面是用来获得效果的代码。如果需要，您可以尝试使用 H1 的填充和边距将其隔开。
body{
background-color: #404040;
}
header{
background-image: url("https://images.pexels.com/photos/8263/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb");
height: 500px;
padding: 0;
margin: 0;
background-attachment: fixed;
background-size: cover;
text-transform: capitalize;
padding-top: 180px;
text-align:center;
}
h1{
color: white;
text-align: center;
font-size: 50px;
padding:0px;
border:1px solid #000000;
display:inline-block;
margin:0 auto;
line-height:40px;
}
p{
color: white;
text-align: center;
font-size: 30px;
}<body>
<header>
<h1>Guitar Covers</h1>
<p>This is a new page for uploading my Guitar Covers to share with the world</p>
</header>
</body>关于css - 在不影响图像的情况下使用背景图像在文本周围制作边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45314939/