在不影响图像的情况下使用背景图像在文本周围制作边框

Question

我有一张背景图片，上面有 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;
}

Answer 1

这就是你想要的吗？

下面是用来获得效果的代码。如果你愿意，你可以玩一下 H1 的填充和边距 space 。

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>

Answer 2

我走了一条不同的路，用 padding-top

围绕 H1 创建了一个包装器

https://jsfiddle.net/9ss2g8eL/1/

<body>
    <header>
        <div id="h1_surround">

  <h1>Guitar Covers</h1>
  </div>
        <p>This is a new page for uploading my Guitar Covers to share with the world</p>
    </header>
</body>



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;
}
#h1_surround{
  padding-top:180px;
}
h1{
    color: white;
    text-align: center;
    display: block;
    font-size: 50px;
    margin: auto;
  border:1px solid #FF0000;
  width:350px;
}
p{
    color: white;
    text-align: center;
    font-size: 30px;
}

在不影响图像的情况下使用背景图像在文本周围制作边框

Making a border around text with background image without affecting image

css

background

border

background-image