Question

好。我的标题可能没有让你对我的问题实际上是什么有足够的了解，但我真的不知道如何在标题中总结这个特殊问题。这是我的代码：

is_match = (l2[i] == l2[i])

@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>具有白色背景，我希望图片通过#section1 span和h1（不是白色背景），但我不知道怎么做。

Answer 1

这是适合您的解决方案。更改仅在最后两个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/

如何使背景图像“闪耀”文本的字母

1 个答案: