不能在背景图像上方放置框

时间：2017-11-09 08:24:23

标签： html css

问题是关于部分。我希望home_about_box位于背景图像的顶部。这是一个快速草图：image

我对此非常陌生，所以如果你有了解决方案，我会很感激获得代码，以及对我做错了什么的很好的解释。

谢谢，并且不要羞于批评我的代码，只要它是建设性的批评！ 

@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
* {
  box-sizing: border-box;
  transition: all ease-in-out 250ms;
}

body {
  margin: 0;
  font-family: "Lato", sans-serif;
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
  padding: 1em 0 1em;
  background-size: cover;
}

.container {
  width: 100%;
  margin: 0 auto;
}


/* Header
========= */

header {
  position: absolute;
  width: 100%;
}

nav ul {
  margin: 0;
  padding: 1em 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin: .5em
}

nav a {
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .9rem;
  padding: .5em;
  color: #FFF;
}

nav a:hover,
nav a:focus {
  color: #DDD;
}

@media (min-width: 60rem) {
  .logo {
    float: left;
    text-align: center;
    align-content: center;
  }
  nav {
    float: right;
    text-align: center;
    margin-right: 1em;
  }
}


/* Buttons
========== */

.button_top {
  display: inline-block;
  font-size: 1.3rem;
  text-decoration: none;
  text-transform: uppercase;
  border-width: 2px;
  border-style: solid;
  border-color: #174FC1;
  padding: .5em 1em;
  color: #FFF;
}

.button_top:hover,
.button_top:focus {
  background: #174FC1;
  color: #FFF;
}

.button_dark {
  display: inline-block;
  font-size: 1.3rem;
  text-decoration: none;
  text-transform: uppercase;
  border-width: 2px;
  border-style: solid;
  border-color: #FFF;
  padding: .5em 1em;
  color: #FFF;
  margin-bottom: 1em;
}

.button_dark:hover,
.button_dark:focus {
  background: #FFF;
  color: #000;
}

@media (min-width: 25rem) {
  .button_top {
    font-size: 1.7rem;
    padding: .3em 1em
  }
}

@media (min-width: 60rem) {
  .button_top {
    font-size: 2.4rem;
    padding: .3em 1em;
    margin-top: -1em;
  }
}

@media (min-width: 25rem) {
  .button_dark {
    font-size: 1.7rem;
    padding: .3em 1em
  }
}

@media (min-width: 60rem) {
  .button_dark {
    font-size: 2rem;
    padding: .3em 1em;
  }
}

.clearfix::after,
section::after,
footer::after {
  content: "";
  display: block;
  clear: both;
}


/* Typography
========= */

.title {
  font-size: 2rem;
  margin-bottom: 1.6em;
  margin-top: 5em;
}

.title span {
  font-weight: 300;
  display: block;
  font-size: 1.3rem;
}

.title-cta {
  margin: 0 0 1em;
}

@media (min-width: 60rem) {
  .title {
    font-size: 4rem;
    margin-top: 1.5em;
  }
}

h1 {
  font-weight: 800;
  margin-top: 0;
}

.unstyled-list {
  margin: 0;
  padding: 1.3em;
  list-style-type: none;
  text-align: left;
}


/* Home.hero
========= */

.home-hero {
  background-image: url(https://i.imgur.com/yUFKqAe.jpg);
  background-size: cover;
  background-position: center;
  padding: 1em;
  color: #FFF;
  width: 100%;
  height: 100vh;
}

@media (min-width: 25rem) {
  .home-hero {
    width: 100%;
    height: 100vh;
  }
}

@media (min-width: 60rem) {
  .home-hero {
    width: 100%;
    height: auto;
  }
}

@media (min-height: 30rem) {
  .home-hero {
    width: 100%;
    height: 100vh;
  }
}


/*Home About */

.home_about_box {
  background-color: #232323;
  font-size: .8em;
  padding: 4em;
  outline: 2px solid #174fc1;
  outline-offset: -3em;
  color: #FFF;
  position: relative
}

.home_about_box h1 {
  color: #174fc1;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 1.3em;
  background: #232323;
  padding: 0 0.5em
}

@media (min-width: 25rem) {
  h1 {
    font-size: 1.6rem;
  }
  .home_about_box h1 {
    top: 1.3rem;
  }
}

@media (min-width: 60rem) {
  h1 {
    font-size: 1.2rem;
  }
  .about.bg {
    background-image: url(https://i.imgur.com/aTF2hwR.jpg);
    padding: 5em;
  }
  .home_about_box {
    background-color: #232323;
    font-size: 0.8em;
    padding: 4em;
    outline: 2px solid #174fc1;
    outline-offset: -3em;
    color: #fff;
    z-index: 101;
    width: 25em;
    margin-left: 52em;
  }
  .home_about_box h1 {
    top: 1.5rem;
  }
}


/* portfolio
*/

.portfolio_home {
  margin: 1.8em 0 0;
  background-size: cover;
}

.portfolio_home h1 {
  color: #174FC1;
  font-size: 3em;
  margin: auto;
  padding: 0 0 .3em 0;
}

.port-item {
  margin: 0;
  position: relative;
}

.port-item img {
  display: block;
}

.port-desc {
  position: absolute;
  z-index: 100;
  bottom: 0em;
  left: 0em;
  right: 0em;
  color: #FFF;
  background: rgba(0, 0, 0, .75);
  padding-bottom: 1em;
  padding-top: 1em;
}

.port-desc p {
  margin: .5em;
  background-size: 100% 100%;
}

@media (min-width: 40rem) {
  .port-item {
    width: 50%;
    float: left;
  }
}

@media (min-width: 60rem) {
  .port-item {
    width: 33.3333334%;
    float: left;
    overflow: hidden
  }
  .port-desc {
    transform: translateY(150%);
  }
  .port-item:hover .port-desc {
    transform: translateY(0%)
  }
  .port-item img {
    max-width: 100%;
    height: auto;
    padding: 0 0 0;
    background-size: cover;
  }
}


/* CTA
*/

.cta {
  background-color: #174fc1;
  padding: 0.1em;
}

.cta h1 {
  margin-top: 1em;
  color: #FFF
}


/* Footer */

footer {
  background: #232323;
  color: #FFF;
}
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tobias Barsnes</title>
  <link href="home.css" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("a").on('click', function(event) {
        if (this.hash !== "") {
          event.preventDefault();
          var hash = this.hash;
          $('html, body').animate({
            scrollTop: $(hash).offset().top
          }, 900, function() {
            window.location.hash = hash;
          });
        }
      });
    });
  </script>
</head>

<body>
  <header>

    <img class="logo" src="https://i.imgur.com/o3Mmqvq.png" width="100" height="89" alt="">

    <nav>
      <ul>
        <li><a href="Default.html">Home</a></li>
        <li><a href="Portfolio.html">Portfolio</a></li>
        <li><a href="Contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>

  <section class="home-hero">
    <div class="container">
      <h1 class="title">Tobias Barsnes
        <span>Portfolio</span>
      </h1>
      <a href="#portfolio" class="button_top">Take a look</a>
    </div>
  </section>


  <section class="home.about">
    <div class="about.bg">
      <div class="home_about_box">
        <h1>About Myself</h1>
        <p>I am a 16 year old boy from Norway. My whole life I have been interested in graphical design, and I am currently studying "Medium and Communications".</p>
        <p>A big goal for me is to get a job that has to do with graphical design. I have experience dating all the way back to 2012, but I am still in the "learning phase".</p>
      </div>
    </div>
  </section>


  <section class="portfolio_home" id="portfolio">
    <h1>Some of my work</h1>
    <figure class="port-item">
      <!-- Portfolio 1 -->
      <img src="https://i.imgur.com/eBRYWII.png" alt="portfolio item" />
      <figcaption class="port-desc">
        <p>Geofilters</p>
      </figcaption>
    </figure>
    <!-- Portfolio 2 -->
    <figure class="port-item">
      <img src="https://i.imgur.com/gAfgliA.png" alt="portfolio item" />
      <figcaption class="port-desc">
        <p>Quixz eSports</p>
      </figcaption>
    </figure>
    <!-- Portfolio 3 -->
    <figure class="port-item">
      <img src="https://i.imgur.com/IjoGmUT.png" alt="portfolio item" />
      <figcaption class="port-desc">
        <p>3D Renders</p>
      </figcaption>
    </figure>
    <!-- Portfolio 4 -->
    <figure class="port-item">
      <img src="https://i.imgur.com/4zymXa8.png" alt="portfolio item" />
      <figcaption class="port-desc">
        <p>Backgrounds</p>
      </figcaption>
    </figure>
  </section>

  <section class="cta">

    <div class="container">
      <h1 class="title title-cta">Want to see more?
        <span>Then what are you waiting for?</span>
      </h1>
      <a href="#portfolio" class="button_dark">See More</a>
    </div>

  </section>

  <footer>
    <section class="home-foot">
      <ul class="unstyled-list">
        <li> <strong>Website crafted by Tobias Barsnes</strong></li>
      </ul>
    </section>
  </footer>
</body>

</html>

2 个答案:

答案 0 :(得分：0)

我不确定这是否是你想要的，但试试这个CSS代码：

    .home_about_box {
    background-color: transparent;
    font-size: .8em;
    padding: 4em;
    outline: 2px solid #174fc1;
    outline-offset: -3em;
    color: #FFF;
    position: absolute;
    z-index:500;
    margin-top:-25%;
    ;
}

这是一个小提琴：https://jsfiddle.net/er8qhrhL/

答案 1 :(得分：0)

你只需要改变这一行

<div class="about.bg">

到这个

 <div class="about bg">

它会起作用，

注意：

<div class="class1.text"></div>

语法不正确，您可以像这样写

<div class="class1-text"></div>

如果你像

那样使用你的CSS 
.class1.text{}

这意味着你在div中有2个类，你想要选择它们      我上面的选择器将选择这个元素

以完整预览模式查看以下代码

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tobias Barsnes</title>
<style>
	@import 
url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');

* {
    box-sizing: border-box;
    transition: all ease-in-out 250ms;
}

body {
    margin: 0; 
    font-family: "Lato", sans-serif;
    text-align: center; 
}

img {
    max-width: 100%;
    height: auto;
    padding: 1em 0 1em;
    background-size: cover;
}

.container {
    width: 100%;
    margin: 0 auto;
}

/* Header
========= */
header {
    position: absolute;
    width: 100%;
}
nav ul {
    margin: 0;
    padding: 1em 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin: .5em
}

nav a {
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    font-size: .9rem;
    padding: .5em;
    color: #FFF;
}

nav a:hover,
nav a:focus{
    color: #DDD;
}

@media (min-width: 60rem) {
    .logo{
        float: left;
        text-align: center;
        align-content: center;
    }

    nav{
        float: right;
        text-align: center;
        margin-right: 1em;
    }
}

/* Buttons
========== */
.button_top {
    display: inline-block;
    font-size: 1.3rem;
    text-decoration: none;
    text-transform: uppercase;
    border-width: 2px;
    border-style: solid;
    border-color: #174FC1;
    padding: .5em 1em;
    color: #FFF;
}

.button_top:hover,
.button_top:focus {
    background: #174FC1;
    color: #FFF;
}

.button_dark {
    display: inline-block;
    font-size: 1.3rem;
    text-decoration: none;
    text-transform: uppercase;
    border-width: 2px;
    border-style: solid;
    border-color: #FFF;
    padding: .5em 1em;
    color: #FFF;
    margin-bottom: 1em;
}

.button_dark:hover,
.button_dark:focus {
    background: #FFF;
    color: #000;
}

@media  (min-width: 25rem) {
    .button_top {
        font-size: 1.7rem;
        padding: .3em 1em
    }
}


@media  (min-width: 60rem) {
    .button_top {
        font-size: 2.4rem;
        padding: .3em 1em;
        margin-top: -1em;
    }
}

@media  (min-width: 25rem) {
    .button_dark {
        font-size: 1.7rem;
        padding: .3em 1em
    }
}


@media  (min-width: 60rem) {
    .button_dark {
        font-size: 2rem;
        padding: .3em 1em;
    }
}


.clearfix::after,
section::after,
footer::after{
    content:  "";
    display: block;
    clear: both;
}


/* Typography
========= */

.title {
    font-size: 2rem;
    margin-bottom: 1.6em;
    margin-top: 5em;
}

.title span {
    font-weight: 300;
    display: block;
    font-size: 1.3rem;
}

.title-cta {
    margin: 0 0 1em;
}

@media (min-width: 60rem) {
    .title{
        font-size: 4rem;
        margin-top: 1.5em;
    }
}

h1 {
    font-weight: 800;
    margin-top: 0;
}

.unstyled-list {
    margin: 0;
    padding: 1.3em;
    list-style-type: none;
    text-align: left;
}

/* Home.hero
========= */

    .home-hero {
      background-image: url(https://i.imgur.com/yUFKqAe.jpg);
      background-size: cover;
      background-position: center;
      padding: 1em;
      color: #FFF;
      width: 100%;
      height: 100vh;
       }

@media (min-width: 25rem) {
    .home-hero{
        width: 100%;
        height: 100vh;
    }
}


@media (min-width: 60rem) {
    .home-hero{
        width: 100%;
        height: auto;
    }
}

@media (min-height: 30rem) {
    .home-hero{
        width: 100%;
        height: 100vh;
    }
}

/*Home About */

.home_about_box {
    background-color: #232323;
    font-size: .8em;
    padding: 4em;
    outline: 2px solid #174fc1;
    outline-offset: -3em;
    color: #FFF;
    position: relative
}

.home_about_box h1 {
    color: #174fc1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 1.3em;
    background: #232323;
    padding: 0 0.5em
}


@media (min-width: 25rem) {
    h1 {
        font-size: 1.6rem;
    }
    .home_about_box h1 {
        top: 1.3rem;
    }
}

@media (min-width: 60rem) {
    h1 {
        font-size: 1.2rem;
    }

    .about.bg {
        background-image: url(https://i.imgur.com/aTF2hwR.jpg);
        padding: 5em;
    }

.home_about_box {
  background-color: #232323;
  font-size: 0.8em;
  padding: 4em;
  outline: 2px solid #174fc1;
  outline-offset: -3em;
  color: #fff;
  z-index: 101;
  width: 25em;
margin-left: 52em;
}

    .home_about_box h1 {
        top: 1.5rem;
    }
}

/* portfolio
*/

.portfolio_home {
    margin: 1.8em 0 0;
    background-size: cover;
}

.portfolio_home h1 {
    color: #174FC1;
    font-size: 3em;
    margin: auto;
    padding: 0 0 .3em 0;
}

.port-item {
    margin: 0;
    position: relative;
}

.port-item img {
    display: block;
}

.port-desc {
    position: absolute;
    z-index: 100;
    bottom: 0em;
    left: 0em;
    right: 0em;
    color: #FFF;
    background: rgba(0,0,0,.75);
    padding-bottom: 1em;
    padding-top: 1em;
}

.port-desc p {
    margin: .5em;
    background-size: 100% 100%;
}

@media (min-width: 40rem) {
    .port-item {
        width: 50%;
        float: left;
    }
}

@media (min-width: 60rem) {
    .port-item {
        width: 33.3333334%;
        float: left;
        overflow: hidden
    }

    .port-desc {
        transform: translateY(150%);
    }

    .port-item:hover .port-desc {
        transform: translateY(0%)
    }

    .port-item img {
    max-width: 100%;
    height: auto;
    padding: 0 0 0;
    background-size: cover;
    }
}

/* CTA
*/

.cta{
    background-color: #174fc1;
    padding: 0.1em;
}

.cta h1 {
    margin-top: 1em;
    color: #FFF
}

/* Footer */

footer {
    background: #232323;
    color: #FFF;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
 $(document).ready(function(){
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 900, function(){
        window.location.hash = hash;
      });
    } 
  });
});
</script>
</head>

<body>
<header>

    <img class="logo" src="https://i.imgur.com/o3Mmqvq.png" width="100" height="89" alt=""> 

    <nav>
        <ul>
            <li><a href="Default.html">Home</a></li>
            <li><a href="Portfolio.html">Portfolio</a></li>
            <li><a href="Contact.html">Contact</a></li>
        </ul>
    </nav>  
</header>

<section class="home-hero">
    <div class="container">
      <h1 class="title">Tobias Barsnes
        <span>Portfolio</span>
      </h1>
      <a href="#portfolio" class="button_top">Take a look</a>
    </div>
</section>


 <section class="home.about">
 <div class="about bg"> 
    <div class="home_about_box">
        <h1>About Myself</h1>
        <p>I am a 16 year old boy from Norway. My whole life I have been interested in graphical design, and I am currently studying "Medium and Communications".</p>
        <p>A big goal for me is to get a job that has to do with graphical design. I have experience dating all the way back to 2012, but I am still in the "learning phase".</p>
    </div>
</div>
 </section>


<section class="portfolio_home" id="portfolio">
    <h1>Some of my work</h1>
    <figure class="port-item">
        <!-- Portfolio 1 -->
    <img src="https://i.imgur.com/eBRYWII.png" alt="portfolio item"/> 
        <figcaption class="port-desc">
            <p>Geofilters</p>
        </figcaption>
    </figure>
        <!-- Portfolio 2 -->
    <figure class="port-item">
    <img src="https://i.imgur.com/gAfgliA.png" alt="portfolio item"/> 
            <figcaption class="port-desc">
            <p>Quixz eSports</p>
        </figcaption>
    </figure>
        <!-- Portfolio 3 -->
    <figure class="port-item">
    <img src="https://i.imgur.com/IjoGmUT.png" alt="portfolio item"/> 
            <figcaption class="port-desc">
            <p>3D Renders</p>
        </figcaption>
    </figure>
        <!-- Portfolio 4 -->
    <figure class="port-item">
    <img src="https://i.imgur.com/4zymXa8.png" alt="portfolio item"/>
            <figcaption class="port-desc">
            <p>Backgrounds</p>
        </figcaption>
    </figure>
</section>

<section class="cta">

    <div class="container">
      <h1 class="title title-cta">Want to see more?
        <span>Then what are you waiting for?</span>
      </h1>
      <a href="#portfolio" class="button_dark">See More</a>
    </div>

</section>

<footer>
<section class="home-foot">
    <ul class="unstyled-list">
        <li>  <strong>Website crafted by Tobias Barsnes</strong></li>
    </ul>
</section>
</footer>
</body>
</html>

相关问题
最新问题