Top Pens Of 2013（099）—— Fixed Image Backgrounds

最新推荐文章于 2023-10-17 19:39:34 发布

why_su

最新推荐文章于 2023-10-17 19:39:34 发布

阅读量302

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/why_su/article/details/81666851

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

2013年前100：https://codepen.io/2013/popular/pens/
第100：https://codepen.io/dropside/pen/bxhke

学后有感：暂时还搞不懂 box-sizing: border-box; 的“具体”作用。具体详解有该博客：
https://blog.csdn.net/qq_37453240/article/details/79216205 （全是拗口的文字看不大懂）

演示效果：
这里写图片描述

代码如下：
index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Fixed Image Backgrounds</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head> 
    <body>
        <header>
            <a href="#" id="logo">LOGO</a>
        </header>
        <section id="hero1" class="hero">
            <div class="inner">
                <div class="copy">
                    <h1>海边的夏天</h1>
                    <p>阳光，沙滩，还有仙人掌</p>
                </div>
            </div>
        </section>
        <section class="content">
            <div class="inner">
                <div class="copy">
                    <h1>彪悍的人生</h1>
                    <p>不需要解释</p>
                </div>
            </div>
        </section>
        <section id="hero2" class="hero">
            <div class="inner">
                <div class="copy">
                    <h1>一缕天地</h1>
                    <p>岂非井底之蛙</p>
                </div>
            </div>
        </section>
        <section class="content">
            <div class="inner">
                <div class="copy">
                    <h1>留白的艺术</h1>
                    <p>向谁解释</p>
                </div>
            </div>
        </section>
    </body>
</html>

style.css

html, body {
  margin: 0px;
  padding: 0px;
}
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
header {
  /*fixed相对于浏览器定位，不随页面滚动*/
  z-index: 1;
  position: fixed;
  width: 100%;
  height: 60px;
  background: rgba(0, 0, 0, 0.1);   
}
header a {
  color:white;
  background: rgba(0,0,0,0.1);
  display: inline-block;
  padding: 0 30px;
  height: 60px;
  font-family: 'Roboto Slab', serif;
  text-decoration: none;
  text-align: center;
  line-height: 60px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}
#hero1 {
  background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534234801099&di=370197ae2b04f85c5f29d57ea63c5bd0&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F03%2F10%2F69f5bc1d0409261191e79c4bf03f3739.jpg);
  /*保持图片宽高比例*/
  background-size: cover;
  /*图片位置*/
  background-position: center center;
  /*当页面其它部分滚动时，背景图片不滚动*/ 
  background-attachment: fixed;
}
#hero2 {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/21555/Melissani-cave-natural.jpg);   
  /*保持图片宽高比例*/
  background-size: cover;
  /*图片位置*/
  background-position: center center;
  /*当页面其它部分滚动时，背景图片不滚动*/ 
  background-attachment: fixed;
}
.hero, .content {
  text-align: center;   
}
.inner {
  min-height: 600px;
  position: relative;   
}
.hero .inner {
  /*半透明*/
  background: rgba(0, 0, 0, 0.5);
}
.copy {
  position: absolute;
  top: 50%; 
  height: 10em;
  margin-top: -5em;
  width: 100%;
}
.hero h1, .hero p {
  color: #fff;  
}
.content h1, .content p {
  color: #333;  
}
h1 {
  margin: 0px;
  font-family: 'Roboto Slab', serif;
  font-weight: 400;
  font-size: 32px;
  padding: 0px 20px;
}
p {
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  padding: 0px 20px;
}