我有這個代碼:
new WOW().init();
/* AUTHOR LINK */
$('.about-me-img img, .authorWindowWrapper').hover(function() {
$('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans');
}, function() {
//$('.authorWindowWrapper').stop().css('display', 'none').find('p').removeClass('trans');
});
body {
font-family: Open Sans, "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 13px;
background-color: #000000 !important;
background-size: cover;
margin: 0;
height: 100%;
background-image: url("https://media.istockphoto.com/photos/programming-source-code-on-digital-screen-software-developer-and-picture-id1336271758?b=1&k=20&m=1336271758&s=170667a&w=0&h=HoJqtqo1r54eZf9G4OqBXRHXLsYoD0X9wMR-vXFBiTE=");
}
.overlayE {
position: absolute;
width: 100%;
height: 100% !important;
margin: 0;
padding: 0;
z-index: -1;
background-color: rgba(0, 0, 0, 0.886);
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
font-size: 13px;
direction: ltr;
}
.sectionClass1 {
padding: 80px 0px 50px 0px;
position: relative;
display: block;
}
.row {
width: 980px;
height: 100%;
max-width: 100%;
margin: 0 auto;
}
.row:before,
.row:after {
content: "";
display: table;
}
.sectiontitle {
background-position: center;
text-align: center;
min-height: 20px;
}
.sectiontitle h2 {
font-size: 30px;
color: #222;
margin-bottom: 0px;
padding-right: 10px;
padding-left: 10px;
}
.headerLine {
width: 160px;
height: 2px;
display: inline-block;
background: #101F2E;
}
.fullWidth {
width: 100%;
display: table;
float: none;
padding: 0;
min-height: 1px;
height: 100%;
position: relative;
}
/********************************/
/* SECTION WORK EXPERIENCE
********************************/
#work-experience .sectiontitle .headerLine {
width: 280px;
}
#work-experience .headerline {
width: 280px;
}
.cbp_tmtimeline {
margin: 60px 30px 0 0;
padding: 0;
list-style: none;
position: relative;
}
.cbp_tmtimeline:before {
content: '';
position: absolute;
top: 3%;
bottom: 0;
width: 10px;
background: #324454;
left: 13%;
height: 100%;
}
.cbp_tmtimeline li:last-child:before {
content: initial;
}
.cbp_tmtimeline>li .cbp_tmtime {
display: block;
width: 25%;
padding-right: 100px;
position: absolute;
}
.cbp_tmtimeline>li .cbp_tmtime span {
display: block;
text-align: right;
}
.cbp_tmtimeline>li .cbp_tmtime span:first-child {
font-size: 0.9em;
color: #bdd0db;
}
.cbp_tmtimeline>li .cbp_tmtime span:last-child {
font-size: 2.9em;
color: #3594cb;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmtime span:last-child {
color: #6cbfee;
}
.cbp_tmtimeline>li .cbp_tmlabel {
margin: 0 0 15px 25%;
background: rgba(50, 68, 84, 1);
color: #FFF;
padding: 30px;
font-size: 1.2em;
font-weight: 300;
line-height: 1.4;
font-family: 'Open Sans';
position: relative;
border-radius: 5px;
min-height: 150px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
background: #2B3A48;
}
.cbp_tmtimeline>li .cbp_tmlabel h3 {
margin-top: 0px;
color: white;
font-size: 20px;
margin-bottom: 5px;
padding: 0 0 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.cbp_tmtimeline>li .cbp_tmlabel h4 {
opacity: 0.7;
color: rgba(255, 255, 255, 1);
letter-spacing: 0px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
line-height: 1.2em;
font-weight: 600;
padding: 0;
padding-bottom: 10px;
margin: 0;
text-align: left;
}
.cbp_tmtimeline>li .cbp_tmlabel h4 i {
margin-right: 5px;
vertical-align: middle;
}
.cbp_tmtimeline>li .cbp_tmlabel:after {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-right-color: rgba(50, 68, 84, 1);
border-width: 10px;
top: 70px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: #2B3A48;
}
.cbp_tmtimeline>li .cbp_tmicon {
width: 150px;
height: 150px;
top: 3%;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-size: 1.4em;
line-height: 40px;
-webkit-font-smoothing: antialiased;
position: absolute;
color: #151515;
background: #324454;
border-radius: 50%;
text-align: center;
left: 8%;
margin: 0 0 0 -25px;
}
.cbp_tmtimeline li {
margin-bottom: 70px;
position: relative;
}
.sectionClassProject {
position: relative;
display: block;
/* background: #f7f7f7; */
margin: 0 auto;
padding: 80px 1.875em 3.125em;
}
.projectParagraph {
font-size: 18px;
margin: 0.5em 0 0;
font-family: 'Source Sans Pro', serif;
}
.projectParagraphLink {
font-size: 15px !important;
font-weight: 500 !important;
margin-top: 50px !important;
margin-bottom: 0px;
text-align: right;
}
.projectParagraphLink a {
color: white;
text-decoration: underline;
}
.cbp_tmicon img {
width: 100%;
}
.faPra {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 70px;
vertical-align: middle;
color: white;
line-height: 150px;
}
.label {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 3px;
color: #FFFFFF;
display: inline;
font-size: 12px;
font-weight: bold;
margin-right: 10px;
padding: 5px 15px;
}
.date {
color: #BFC3C7;
display: block;
font-size: 14px;
font-weight: 600;
position: absolute;
top: 30px;
right: 20px;
}
.date i {
margin-right: 8px;
vertical-align: top;
font-size: 18px;
line-height: 20px;
}
@media (max-width: 1024px) {
.cbp_tmtimeline:before {
display: none;
}
.cbp_tmtimeline>li .cbp_tmtime {
width: 100%;
position: relative;
padding: 0 0 20px 0;
}
.cbp_tmtimeline>li .cbp_tmtime span {
text-align: left;
}
.cbp_tmtimeline>li .cbp_tmlabel {
margin: 30px 0 70px 0;
padding: 50px 30px 30px 30px;
font-weight: 400;
font-size: 95%;
float: left;
}
.cbp_tmtimeline>li .cbp_tmlabel:after {
right: auto;
border-right-color: transparent;
border-bottom-color: rgb(50, 68, 84);
top: -20px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: transparent;
border-bottom-color: rgb(43, 58, 72);
left: 65px;
}
.cbp_tmtimeline>li:nth-child(even) .cbp_tmlabel:after {
right: 65px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmicon {
position: relative;
float: left;
left: auto;
margin: 0px 5px 0 0px;
}
.cbp_tmtimeline>li:nth-child(even) .cbp_tmicon {
position: relative;
float: right;
left: auto;
margin: 0px 5px 0 0px;
}
.cbp_tmtimeline>li .cbp_tmtime span:last-child {
font-size: 1.5em;
}
}
@media (max-width: 32em) {
.cbp-ntaccordion {
font-size: 70%;
}
}
<link rel="stylesheet" href="experience.css">
<script src="experience.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source Sans Pro:400,700,900&amp" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open Sans:400,700&subset=latin,latin-ext" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<div class="overlayE"></div>
<div id="workexperience">
<div class="row ">
<div class="sectiontitle">
<h2>Work experience</h2>
<span class="headerLine"></span>
</div>
<ul class="cbp_tmtimeline">
<li>
<div class="cbp_tmicon cbp_tmicon-phone">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web developer</h3>
<div class="date">
<i class="fa fa-calendar"></i>April 2014 - Current
</div>
<h4><i class="fa fa-flag"></i>Davic Company, Bratislava</h4>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit obcaecati ipsa quae, iusto laudantium qui, nisi eum modi perspiciatis quasi facilis corporis iure soluta enim incidunt itaque aspernatur sequi tempora.</p>
</div>
</li>
<li>
<div class="cbp_tmicon cbp_tmicon-screen">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web designer</h3>
<h4><i class="fa fa-flag"></i>Fannous Company, Prague</h4>
<div class="date"><i class="fa fa-calendar"></i>June 2012 - April 2014</div>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt quasi perspiciatis, aliquid sed maiores accusamus. Adipisci quidem nostrum quos quae doloremque esse a, ipsum earum, recusandae omnis dignissimos et sint.</p>
</div>
</li>
<li>
<div class="cbp_tmicon cbp_tmicon-mail">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web designer</h3>
<h4><i class="fa fa-flag"></i>Techixs Company, London</h4>
<div class="date"><i class="fa fa-calendar"></i>November 2009 - June 2012</div>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla labore atque alias ipsa, nam quod rerum repellat cumque, aliquam sequi vitae voluptatibus cum soluta incidunt tempore accusamus eius sed excepturi!Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Tempora natus veritatis aperiam repellendus dolor vel, expedita assumenda eos, mollitia quae ullam esse voluptas vero. Dolores culpa eaque vitae eum quibusdam?</p>
</div>
</li>
<li>
<div class="cbp_tmicon cbp_tmicon-phone">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Freelancer</h3>
<div class="date"><i class="fa fa-calendar"></i>Januar 2006 - November 2009</div>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse iusto, possimus hic at quisquam, incidunt illo asperiores et nobis, qui nulla consequatur molestiae quibusdam expedita dignissimos? Iste eum velit quos.</p>
</div>
</li>
</ul>
</div>
</div>
如果您運行代碼并在新頁面上打開它,頁面末尾會有不同的背景,我想將其洗掉并將其與我擁有的深色背景合并。如何將 dar 背景擴展到整頁?我只想洗掉頁面末尾附近的藍色背景。
編輯:在此處輸入影像描述
uj5u.com熱心網友回復:
你可以設定body上的overflow-y來滾動并且仍然使用固定的背景
new WOW().init();
/* AUTHOR LINK */
$('.about-me-img img, .authorWindowWrapper').hover(function() {
$('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans');
}, function() {
//$('.authorWindowWrapper').stop().css('display', 'none').find('p').removeClass('trans');
});
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Open Sans, "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 13px;
background-color: #000000 !important;
background-size: cover;
margin: 0;
height: 100%;
overflow-y: scroll;
background-image: url("https://media.istockphoto.com/photos/programming-source-code-on-digital-screen-software-developer-and-picture-id1336271758?b=1&k=20&m=1336271758&s=170667a&w=0&h=HoJqtqo1r54eZf9G4OqBXRHXLsYoD0X9wMR-vXFBiTE=");
}
.overlayE {
position: fixed;
width: 100%;
height: 100% !important;
margin: 0;
padding: 0;
z-index: -1;
background-color: rgba(0, 0, 0, 0.886);
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
font-size: 13px;
direction: ltr;
}
.sectionClass1 {
padding: 80px 0px 50px 0px;
position: relative;
display: block;
}
.row {
width: 980px;
height: 100%;
max-width: 100%;
margin: 0 auto;
}
.row:before,
.row:after {
content: "";
display: table;
}
.sectiontitle {
background-position: center;
text-align: center;
min-height: 20px;
}
.sectiontitle h2 {
font-size: 30px;
color: #222;
margin-bottom: 0px;
padding-right: 10px;
padding-left: 10px;
}
.headerLine {
width: 160px;
height: 2px;
display: inline-block;
background: #101F2E;
}
.fullWidth {
width: 100%;
display: table;
float: none;
padding: 0;
min-height: 1px;
height: 100%;
position: relative;
}
/********************************/
/* SECTION WORK EXPERIENCE
********************************/
#work-experience .sectiontitle .headerLine {
width: 280px;
}
#work-experience .headerline {
width: 280px;
}
.cbp_tmtimeline {
margin: 60px 30px 0 0;
padding: 0;
list-style: none;
position: relative;
}
.cbp_tmtimeline:before {
content: '';
position: absolute;
top: 3%;
bottom: 0;
width: 10px;
background: #324454;
left: 13%;
height: 100%;
}
.cbp_tmtimeline li:last-child:before {
content: initial;
}
.cbp_tmtimeline>li .cbp_tmtime {
display: block;
width: 25%;
padding-right: 100px;
position: absolute;
}
.cbp_tmtimeline>li .cbp_tmtime span {
display: block;
text-align: right;
}
.cbp_tmtimeline>li .cbp_tmtime span:first-child {
font-size: 0.9em;
color: #bdd0db;
}
.cbp_tmtimeline>li .cbp_tmtime span:last-child {
font-size: 2.9em;
color: #3594cb;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmtime span:last-child {
color: #6cbfee;
}
.cbp_tmtimeline>li .cbp_tmlabel {
margin: 0 0 15px 25%;
background: rgba(50, 68, 84, 1);
color: #FFF;
padding: 30px;
font-size: 1.2em;
font-weight: 300;
line-height: 1.4;
font-family: 'Open Sans';
position: relative;
border-radius: 5px;
min-height: 150px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
background: #2B3A48;
}
.cbp_tmtimeline>li .cbp_tmlabel h3 {
margin-top: 0px;
color: white;
font-size: 20px;
margin-bottom: 5px;
padding: 0 0 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.cbp_tmtimeline>li .cbp_tmlabel h4 {
opacity: 0.7;
color: rgba(255, 255, 255, 1);
letter-spacing: 0px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
line-height: 1.2em;
font-weight: 600;
padding: 0;
padding-bottom: 10px;
margin: 0;
text-align: left;
}
.cbp_tmtimeline>li .cbp_tmlabel h4 i {
margin-right: 5px;
vertical-align: middle;
}
.cbp_tmtimeline>li .cbp_tmlabel:after {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-right-color: rgba(50, 68, 84, 1);
border-width: 10px;
top: 70px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: #2B3A48;
}
.cbp_tmtimeline>li .cbp_tmicon {
width: 150px;
height: 150px;
top: 3%;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-size: 1.4em;
line-height: 40px;
-webkit-font-smoothing: antialiased;
position: absolute;
color: #151515;
background: #324454;
border-radius: 50%;
text-align: center;
left: 8%;
margin: 0 0 0 -25px;
}
.cbp_tmtimeline li {
margin-bottom: 70px;
position: relative;
}
.sectionClassProject {
position: relative;
display: block;
/* background: #f7f7f7; */
margin: 0 auto;
padding: 80px 1.875em 3.125em;
}
.projectParagraph {
font-size: 18px;
margin: 0.5em 0 0;
font-family: 'Source Sans Pro', serif;
}
.projectParagraphLink {
font-size: 15px !important;
font-weight: 500 !important;
margin-top: 50px !important;
margin-bottom: 0px;
text-align: right;
}
.projectParagraphLink a {
color: white;
text-decoration: underline;
}
.cbp_tmicon img {
width: 100%;
}
.faPra {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 70px;
vertical-align: middle;
color: white;
line-height: 150px;
}
.label {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 3px;
color: #FFFFFF;
display: inline;
font-size: 12px;
font-weight: bold;
margin-right: 10px;
padding: 5px 15px;
}
.date {
color: #BFC3C7;
display: block;
font-size: 14px;
font-weight: 600;
position: absolute;
top: 30px;
right: 20px;
}
.date i {
margin-right: 8px;
vertical-align: top;
font-size: 18px;
line-height: 20px;
}
@media (max-width: 1024px) {
.cbp_tmtimeline:before {
display: none;
}
.cbp_tmtimeline>li .cbp_tmtime {
width: 100%;
position: relative;
padding: 0 0 20px 0;
}
.cbp_tmtimeline>li .cbp_tmtime span {
text-align: left;
}
.cbp_tmtimeline>li .cbp_tmlabel {
margin: 30px 0 70px 0;
padding: 50px 30px 30px 30px;
font-weight: 400;
font-size: 95%;
float: left;
}
.cbp_tmtimeline>li .cbp_tmlabel:after {
right: auto;
border-right-color: transparent;
border-bottom-color: rgb(50, 68, 84);
top: -20px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: transparent;
border-bottom-color: rgb(43, 58, 72);
left: 65px;
}
.cbp_tmtimeline>li:nth-child(even) .cbp_tmlabel:after {
right: 65px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmicon {
position: relative;
float: left;
left: auto;
margin: 0px 5px 0 0px;
}
.cbp_tmtimeline>li:nth-child(even) .cbp_tmicon {
position: relative;
float: right;
left: auto;
margin: 0px 5px 0 0px;
}
.cbp_tmtimeline>li .cbp_tmtime span:last-child {
font-size: 1.5em;
}
}
@media (max-width: 32em) {
.cbp-ntaccordion {
font-size: 70%;
}
}
<link rel="stylesheet" href="experience.css">
<script src="experience.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source Sans Pro:400,700,900&amp" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open Sans:400,700&subset=latin,latin-ext" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<body>
<div class="overlayE"></div>
<div id="workexperience">
<div class="row ">
<div class="sectiontitle">
<h2>Work experience</h2>
<span class="headerLine"></span>
</div>
<ul class="cbp_tmtimeline">
<li>
<div class="cbp_tmicon cbp_tmicon-phone">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web developer</h3>
<div class="date">
<i class="fa fa-calendar"></i>April 2014 - Current
</div>
<h4><i class="fa fa-flag"></i>Davic Company, Bratislava</h4>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit obcaecati ipsa quae, iusto laudantium qui, nisi eum modi perspiciatis quasi facilis corporis iure soluta enim incidunt itaque aspernatur sequi tempora.</p>
</div>
</li>
<li>
<div class="cbp_tmicon cbp_tmicon-screen">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web designer</h3>
<h4><i class="fa fa-flag"></i>Fannous Company, Prague</h4>
<div class="date"><i class="fa fa-calendar"></i>June 2012 - April 2014</div>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt quasi perspiciatis, aliquid sed maiores accusamus. Adipisci quidem nostrum quos quae doloremque esse a, ipsum earum, recusandae omnis dignissimos et sint.</p>
</div>
</li>
<li>
<div class="cbp_tmicon cbp_tmicon-mail">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web designer</h3>
<h4><i class="fa fa-flag"></i>Techixs Company, London</h4>
<div class="date"><i class="fa fa-calendar"></i>November 2009 - June 2012</div>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla labore atque alias ipsa, nam quod rerum repellat cumque, aliquam sequi vitae voluptatibus cum soluta incidunt tempore accusamus eius sed excepturi!Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Tempora natus veritatis aperiam repellendus dolor vel, expedita assumenda eos, mollitia quae ullam esse voluptas vero. Dolores culpa eaque vitae eum quibusdam?</p>
</div>
</li>
</ul>
</div>
</div>
</body>
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/488237.html
標籤:javascript html css 动画
上一篇:元素之間的影片延遲
