2017-03-12 11 views
3

いいえ。私のタイトルはおそらく私の問題が実際にどのようになっているかを十分には分かっていないかもしれませんが、この問題をタイトルでどのように集計するのかは本当に分かりません。 ここに私のコードです:私は#section1 spanが白の背景を持つようにしたいと私はイメージがh1h2(ない白背景)を通過したい背景画像を作成する方法テキストの文字を「輝かせる」

@import url('https://fonts.googleapis.com/css?family=Londrina+Sketch'); 
 
@import url('https://fonts.googleapis.com/css?family=Ranga'); 
 
@import url('https://fonts.googleapis.com/css?family=Rubik+Mono+One'); 
 
body { 
 
    background: url("http://wallpapercave.com/wp/X5iq6dZ.jpg"); 
 
} 
 

 
header { 
 
    background: url(https://raw.github.com/mmoustafa/Chalkboard/master/img/bg.png); 
 
    color: white; 
 
    padding-top: 15px; 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
    border-radius: 50px; 
 
} 
 

 
header h1 { 
 
    font-family: 'Londrina Sketch', cursive; 
 
    font-size: 2em; 
 
    margin-right: 50px; 
 
} 
 

 
header nav { 
 
    display: inline; 
 
    position: relative; 
 
    bottom: 50px; 
 
    left: 80%; 
 
} 
 

 
header nav a { 
 
    font-family: 'Ranga', cursive; 
 
    text-decoration: overline; 
 
    margin-right: 25px; 
 
    color: white; 
 
    font-size: 1.5em; 
 
} 
 

 
header nav a:hover { 
 
    text-decoration: none; 
 
    color: grey; 
 
} 
 

 
#section1 span { 
 
    color: transparent; 
 
    font-weight: 900; 
 
    font-family: 'Rubik Mono One', sans-serif; 
 
    display: inline-block; 
 
    background: white 
 
}
<!DOCTYPE html> 
 

 
<head> 
 
    <title>Nathaniel Santley | Welcome to my site!</title> 
 
    <link href="NathanielSantley.css" rel="stylesheet"> 
 
    <meta charset="UTF-8"> 
 
    <meta name="description" content="Hi! My name is Nathaniel Santley. I'm a programming enthusiast, video game lover, and a nerd down to the core."> 
 
    <meta name="keywords" content="nathaniel, santley, Nathaniel, Santley, programming, video, games"> 
 
    <meta name="author" content="Nathaniel Santley"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <h1>Nathaniel Santley</h1> 
 
    <nav> 
 
     <a href="#">Home</a> 
 
     <a href="#">About Me</a> 
 
     <a href="#">Contact Me</a> 
 
    </nav> 
 
    </header> 
 
    <section id="section1"> 
 
    <span><h1>NATHANIEL SANTLEY</h1><br /><h2>Programming enthusiast.<br />Video game lover.<br />Nerd down to the core.</h2></span> 
 
    </section> 
 
    <section> 
 

 
    </section> 
 
    <footer> 
 

 
    </footer> 
 
</body>

が、これを行う方法を知らない。

+0

少し混乱。テキストがないところだけ白い背景にしたいのですか、テキストのある部分には背景のイメージを見ることができますか?あるいは、逆の場合もありますか? –

+1

紙の上にテキストの形を切り出し、カット紙を自分の背景イメージに置いたようなものにしたい。 – NathanielSantley

答えて

5

ここはあなたのための解決策です。変更は、最後の二つのCSSルールにのみ、次のとおりです。ところで

@import url('https://fonts.googleapis.com/css?family=Londrina+Sketch'); 
 
@import url('https://fonts.googleapis.com/css?family=Ranga'); 
 
@import url('https://fonts.googleapis.com/css?family=Rubik+Mono+One'); 
 
body { 
 
    background: url("http://wallpapercave.com/wp/X5iq6dZ.jpg"); 
 
} 
 
header { 
 
    background: 
 
url(https://raw.github.com/mmoustafa/Chalkboard/master/img/bg.png); 
 
    color: white; 
 
    padding-top: 15px; 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
    border-radius: 50px; 
 
} 
 
header h1 { 
 
    font-family: 'Londrina Sketch', cursive; 
 
    font-size: 2em; 
 
    margin-right: 50px; 
 
} 
 
header nav { 
 
    display: inline; 
 
    position: relative; 
 
    bottom: 50px; 
 
    left: 80%; 
 
} 
 
header nav a { 
 
    font-family: 'Ranga', cursive; 
 
    text-decoration: overline; 
 
    margin-right: 25px; 
 
    color: white; 
 
    font-size: 1.5em; 
 
} 
 
header nav a:hover { 
 
    text-decoration: none; 
 
    color: grey; 
 
} 
 
#section1 span { 
 
    font-weight: 900; 
 
    font-family: 'Rubik Mono One', sans-serif; 
 
    display: inline-block; 
 
    background: white 
 
} 
 
#section1 span h1, #section1 span h2 { 
 
    background: url(http://wallpapercave.com/wp/X5iq6dZ.jpg) -115px -95px no-repeat; 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
}
<head> 
 
    <title>Nathaniel Santley | Welcome to my site!</title> 
 
    <link href="NathanielSantley.css" rel="stylesheet"> 
 
    <meta charset="UTF-8"> 
 
    <meta name="description" content="Hi! My name is Nathaniel Santley. I'm a programming enthusiast, video game lover, and a nerd down to the core."> 
 
    <meta name="keywords" content="nathaniel, santley, Nathaniel, Santley, programming, video, games"> 
 
    <meta name="author" content="Nathaniel Santley"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
</head> 
 
<body> 
 
    <header> 
 
     <h1>Nathaniel Santley</h1> 
 
     <nav> 
 
      <a href="#">Home</a> 
 
      <a href="#">About Me</a> 
 
      <a href="#">Contact Me</a> 
 
     </nav> 
 
    </header> 
 
    <section id="section1"> 
 
     <span><h1>NATHANIEL SANTLEY</h1><br /><h2>Programming enthusiast.<br />Video game lover.<br />Nerd down to the core.</h2></span> 
 
    </section> 
 
    <section> 
 

 
    </section> 
 
    <footer> 
 

 
    </footer> 
 
</body>

:私はここからこれを得た:あなたが探しているものによってhttps://css-tricks.com/image-under-text/

+0

ありがとうございました!ウェブを検索しようとしましたが、検索ボックスで問題を語る方法がわかりませんでした。 – NathanielSantley

+0

私はこの精神的な写真の例を教えてください。 – NathanielSantley

+0

私は私のサイトにあるスパンのサイズの紙から切り取った文字の形を持っています。 – NathanielSantley

関連する問題