在不影響圖像的情況下在背景圖像周圍製作邊框

我有一個帶有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分開。感謝你付出的努力。 –

在不影響圖像的情況下在背景圖像周圍製作邊框

回答

相關問題