Erstellen eines Rahmens um Text mit Hintergrundbild ohne Auswirkungen auf das Bild

Ich habe ein Hintergrundbild mit einem h1 und Absatz-Tag an der Spitze. Ich möchte einen Rahmen um das h1-Tag erstellen, ohne das Padding oder den Rand des Headers zu beeinflussen. Wenn ich den Rahmen erstelle, umgibt er den Text und das obere Padding. Gibt es eine Möglichkeit, einen Rahmen nur um den Text herum anzubringen?Erstellen eines Rahmens um Text mit Hintergrundbild ohne Auswirkungen auf das Bild

Der vollständige Code ist auf JSFiddle here.

Der CSS-Code ist hier:

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

Quelle

2017-07-25 Nouran Samy

das ist, was Sie sind?

Unten ist der Code, der verwendet wurde, um den Effekt zu erhalten. Sie können mit dem Padding und den Rändern für das H1 spielen, um es auszublenden, wenn Sie möchten.

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>

Quelle

2017-07-25 23:28:09 Syfer

Vielen Dank, das ist genau das, was ich wollte. –

Ich bin froh, dass ich helfen konnte :-) – Syfer

ging ich einen anderen Router und erstellt einen Wrapper um die H1 mit den 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; 
}

Quelle

2017-07-25 23:30:16 Zak

Dies ist auch eine großartige Lösung. Ich denke, der einzige Weg, dies zu tun, besteht darin, die Header-Deklarationen von denen der h1 zu trennen. Danke für Ihre Bemühungen. –

Erstellen eines Rahmens um Text mit Hintergrundbild ohne Auswirkungen auf das Bild

Antwort

Verwandte Themen