html背景自动覆盖,CSS3 背景图片淡入动效+覆盖层

CSS

语言：

CSSSCSS

确定

/* Variables */

/* Fonts */

/* Mixins */

/* Base Styles */

@import url(https://fonts.googleapis.com/css?family=Abril+Fatface);

@import url(https://fonts.googleapis.com/css?family=Amatic+SC);

* {

box-sizing: border-box;

}

html,

body {

color: #999;

font-family: Helvetica, Arial, sans-serif;

font-size: 10px;

font-weight: 100;

margin: 0;

padding: 0;

}

.container {

margin: 0 auto;

max-width: 750px;

padding: 0 24px;

}

header {

animation: bgFadeIn 1s ease-in both;

position: relative;

padding: 28px;

text-align: center;

}

header:before {

background: linear-gradient(rgba(0, 235, 235, 0.7), rgba(0, 235, 235, 0.7)), url("https://images.unsplash.com/photo-1441716844725-09cedc13a4e7?q=80&fm=jpg&s=c895a1f219d174952415b9b7a0811e62");

background-color: #ccc;

background-attachment: fixed;

background-position: center center;

background-repeat: no-repeat;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

bottom: 0;

content: ' ';

left: 0;

position: absolute;

right: 0;

top: 0;

z-index: -1;

}

@keyframes bgFadeIn {

0% {

background-color: white;

}

100% {

background-color: rgba(255, 255, 255, 0);

}

}

header .container {

margin: 12rem auto;

}

header h1 {

border-bottom: 2px solid #fff;

border-top: 2px solid #fff;

color: #fff;

font-family: "Amatic SC", cursive;

font-size: 8.75rem;

margin: 0;

}

header h3 {

color: #fff0a5;

font-family: "Abril Fatface", cursive;

font-size: 3.75rem;

font-style: italic;

font-weight: 100;

margin: 0;

}

section {

padding: 2rem;

}

section p {

font-size: 2.5rem;

line-height: 3.5rem;

}

section p.lead-in {

font-size: 3rem;

}

section p.lead-in:first-letter {

font-size: 7.25rem;

display: block;

float: left;

position: relative;

line-height: 0.1;

top: -0.2em;

}