html5插入页头图片,HTML5 固定页头+灰度模糊效果的照片墙+悬停呈现原照

最新推荐文章于 2022-02-02 02:28:10 发布

你在干嘛a

最新推荐文章于 2022-02-02 02:28:10 发布

阅读量146

点赞数

文章标签： html5插入页头图片

CSS

语言：

CSSSCSS

确定

/* ------------------- */

/* TEMPLATE -- */

/* ----------------- */

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);

/* Big Ones */

body {

height: 100%;

width: 100%;

margin: 0;

color: whitesmoke;

font-size: 16px;

font-family: 'Lato';

background: url(/uploads/151201/stardust.png);

}

h1 {

padding-bottom: 10px;

font-size: 32px;

border-bottom: 1px solid tomato;

}

h2 {

font-size: 26px;

}

h3 {

font-size: 18px;

}

p {

margin: 15px 0;

line-height: 24px;

color: gainsboro;

}

a {

color: dodgerblue;

text-decoration: none;

border-bottom: 1px dotted;

}

a:hover {

color: tomato;

}

.container {

max-width: 960px;

height: 100%;

margin: 0 auto;

/* ------------------- */

/* STICKY HEADER -- */

/* ----------------- */

/* Header */

padding: 20px;

}

header {

padding: 10px 20px;

background-color: whitesmoke;

-webkit-transition: 0.5s;

transition: 0.5s;

}

header .container {

padding: 0;

}

h1.title {

float: left;

color: #111;

font-family: 'Lato';

font-weight: 900;

letter-spacing: 2px;

border-bottom: 0;

}

img.logo {

height: 60px;

/* Sticky */

/* added to the header with jQuery */

width: 60px;

}

header.sticky {

position: fixed;

left: 0;

right: 0;

height: 60px;

padding: 20px 0 10px 0;

}

.sticky img.logo {

height: 40px;

width: 40px;

}

.sticky h1.title {

padding: 10px 0 0 0;

margin: 0;

/* ------------------- */

/* EVERYTHING ELSE -- */

/* ----------------- */

/* Back to Top */

font-size: 24px;

}

a#back-to-top {

position: fixed;

bottom: 0;

right: 0;

margin: 20px;

color: whitesmoke;

text-shadow: 0 0 10px black;

border: none;

-webkit-transition: 0.5s;

transition: 0.5s;

}

a#back-to-top:before {

content: '\f01b';

font-family: 'FontAwesome';

margin-right: 10px;

}

a#back-to-top:hover {

/* Gallery */

color: dodgerblue;

}

.gallery {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-webkit-flex-direction: row;

-ms-flex-direction: row;

flex-direction: row;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

/* combining styles common to every image */

flex-wrap: wrap;

}

.gallery .pic {

display: block;

height: 300px;

width: 33.33%;

background-position: top center, 0 0;

background-blend-mode: color;

cursor: pointer;

-webkit-transition: 0.5s;

/* Images */

transition: 0.5s;

}

.gallery .pic:nth-child(1) {

background: -webkit-linear-gradient(black, rgba(0, 0, 0, 0)), url(http://unsplash.it/350/?image=755);

background: linear-gradient(black, rgba(0, 0, 0, 0)), url(http://unsplash.it/350/?image=755);