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

我有一个带有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; 
}

来源

2017-07-25 Nouran Samy

这是你所追求的？

下面是用来得到效果的代码。如果需要，您可以使用H1的填充和边距进行分隔。

body{ 
 
\t background-color: #404040; 
 
} 
 

 
header{ 
 
\t background-image: url("https://images.pexels.com/photos/8263/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb"); 
 
\t height: 500px; 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t background-attachment: fixed; 
 
\t background-size: cover; 
 
\t text-transform: capitalize; 
 
\t padding-top: 180px; 
 
\t text-align:center; 
 
} 
 
h1{ 
 
\t color: white; 
 
\t text-align: center; 
 
\t font-size: 50px; 
 
\t padding:0px; 
 
\t border:1px solid #000000; 
 
\t display:inline-block; 
 
\t margin:0 auto; 
 
\t line-height:40px; 
 
} 
 
p{ 
 
\t color: white; 
 
\t text-align: center; 
 
\t font-size: 30px; 
 
}

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

来源

2017-07-25 23:28:09 Syfer

非常感谢，这正是我想要的。 –

很高兴我能帮忙:-) – Syfer

我去一个不同的狂胜，创造了H1周围的包装与padding-top

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; 
}

来源

2017-07-25 23:30:16 Zak

这也是一个很好的解决方案。我想唯一的方法就是将标题声明与h1分开。感谢你付出的努力。 –

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

回答

相关问题