我的表单部分div中的黑色背景并不包含在内容中。我已经尝试了内联块，但它仍然占据整个屏幕。我试图将透明的文本和表单包裹起来。如果有人可以帮助，那将是如此赞赏：）`
@import "elements.less";
@import "normalize.less";
@import "var.less";
@import "background.less";
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.cb-slideshow {
list-style-type: none;
}
body {
.font();
color: #fff;
}
header img {
margin: 0 auto;
display: block;
margin-top: 3%;
margin-bottom: 20px;
}
h2 {
color: #fff;
text-align: center;
.font( 30px, normal);
line-height: 38px;
margin-bottom: 0;
}
html,body
{
height: 100%;
padding:0px;
margin:0px;
}
.grid {
margin-bottom: 40px;
margin: 0 auto;
width: 50%;
display: inline-block;
text-align: center;
}
.left {
width: 48%;
float: left;
}
.right {
width: 48%;
float: left;
}
p.xlarge {
font-size: 72px;
margin: 0;
line-height: 1;
}
p.large {
margin: 0;
font-size: 60px;
font-family: 'bariol_light';
line-height: 1;
a {
text-decoration: none;
color:#fff;
}
a:hover {
color:#3399FF;
}
}
.form-section {
background-color:rgba(0, 0, 0, 0.4);
border-radius: 2%;
display: inline-block;
margin-bottom: 25px;
}
section p {
.font(20px);
text-align: center;
}
section > p {
margin-bottom: 5px;
}
.contact-info {
margin: 20px auto 20px auto;
width: 80%;
display: inline-block;
}
form {
text-align: center;
padding: 0 25px 5px 25px;
}
label {
display: block;
padding-top: 30px;
text-align: center;
text-transform: uppercase;
font-size: 12px;
color: #fff;
}
label .label-text {
cursor: text;
font-size: 20px;
line-height: 20px;
letter-spacing: 4px;
-moz-transform: translateY(-34px);
-ms-transform: translateY(-34px);
-webkit-transform: translateY(-34px);
transform: translateY(-34px);
transition: all 0.3s;
}
label input {
background-color: transparent;
border: 0;
border-bottom: 2px solid #4A4A4A;
font-size: 20px;
letter-spacing: -1px;
outline: 0;
padding: 5px 20px;
text-align: center;
transition: all 0.3s;
width: 300px;
color: #fff;
}
label input:focus {
width: 400px;
}
label input:focus + .label-text {
color: #F0F0F0;
font-size: 13px;
-moz-transform: translateY(-74px);
-ms-transform: translateY(-74px);
-webkit-transform: translateY(-74px);
transform: translateY(-74px);
}
label input:valid + .label-text {
font-size: 13px;
-moz-transform: translateY(-74px);
-ms-transform: translateY(-74px);
-webkit-transform: translateY(-74px);
transform: translateY(-74px);
color: #fff;
}
textarea {
height: 120px;
width: 300px;
display: block;
margin: 0 auto;
font-size: 20px;
line-height: 2em;
border-radius: 2%;
background-color:rgba(200,200,200, 0.6);
transition: height .3s ease-out;
transition: width .3s ease-out;
}
textarea:focus {
border: 2px solid #3399FF;
height: 200px;
width: 400px;
transition: height .3s ease-out;
transition: width .3s ease-out;
}
button {
background-color: #333333;
border: 2px solid white;
border-radius: 27px;
color: white;
cursor: pointer;
font-size: 20px;
margin-top: 25px;
margin-bottom: 25px;
padding: 15px 30px;
text-transform: uppercase;
transition: all 200ms;
}
button:hover, button:focus {
background-color: white;
transition: background-color .6s ease-out;
color: #333333;
outline: 0;
}
ul.share-buttons{
list-style: none;
padding: 0;
text-align: center;
}
ul.share-buttons li{
display: inline;
}
.band {
display: block;
width: 100%;
background-color: #c7efef;
height: 6px;
float: left;
}
.strip {
float: left;
height: 6px;
}
.blue2 {
background-color: #4894b0;
width: 23.828125%;
}
.teal2 {
background-color: #6bc8c8;
width: 11.640625%;
}
.sand {
width: 19.296875%;
background-color: #f3c281;
}
.salmon {
width: 16.015625%;
background-color: #e64564;
}
footer {
padding: 10px;
background-color: #262F36;
p {
color: #fff;
}
.cta {
font-size: 24px;
}
}
@media screen and (max-width: 1000px) {
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
input.submit-button {
width: 100%;
margin: 0 auto;
float: left;
background-color: #0066FF;
text-transform: uppercase;
}
}
.slideshow {
list-style-type: none;
}
.container{
position: relative;
text-align: center;
}
.slideshow,
.slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(255,255,255,0.8);
}
.slideshow li:nth-child(1) span { background-image: url(http://www.webreality.co.uk/media/15625/wr-team-slider2.png) }
.slideshow li:nth-child(2) span {
background-image: url(http://www.webreality.co.uk/media/15583/bellmans-1.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.slideshow li:nth-child(3) span {
background-image: url(http://www.webreality.co.uk/media/1102/crestbridge.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.slideshow li:nth-child(4) span {
background-image: url(http://www.webreality.co.uk/media/1055/tlc-home.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.slideshow li:nth-child(5) span {
background-image: url(http://www.webreality.co.uk/media/15644/zuri_ipad.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.slideshow li:nth-child(6) span {
background-image: url(http://www.webreality.co.uk/media/1059/umbraco-slider-3.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1);
}
22% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-100%);
}
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-moz-transform: scale(1.1);
}
22% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
25% {
opacity: 0;
-moz-transform: scale(1.1) translateY(-100%);
}
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-transform: scale(1.05);
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-o-transform: scale(1.1);
}
22% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
25% {
opacity: 0;
-o-transform: scale(1.1) translateY(-100%);
}
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-transform: scale(1.05);
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-ms-transform: scale(1.1);
}
22% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
25% {
opacity: 0;
-ms-transform: scale(1.1) translateY(-100%);
}
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1);
}
22% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
25% {
opacity: 0;
-transform: scale(1.1) translateY(-100%);
}
100% { opacity: 0 }
}
@-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(-300%);
}
8% {
opacity: 1;
-webkit-transform: translateY(0%);
}
17% {
opacity: 1;
-webkit-transform: translateY(0%);
}
19% {
opacity: 0;
-webkit-transform: translateY(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateY(-300%);
}
8% {
opacity: 1;
-moz-transform: translateY(0%);
}
17% {
opacity: 1;
-moz-transform: translateY(0%);
}
19% {
opacity: 0;
-moz-transform: translateY(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateY(-300%);
}
8% {
opacity: 1;
-o-transform: translateY(0%);
}
17% {
opacity: 1;
-o-transform: translateY(0%);
}
19% {
opacity: 0;
-o-transform: translateY(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateY(-300%);
}
8% {
opacity: 1;
-ms-transform: translateY(0%);
}
17% {
opacity: 1;
-ms-transform: translateY(0%);
}
19% {
opacity: 0;
-ms-transform: translateY(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateY(-300%);
}
8% {
opacity: 1;
transform: translateY(0%);
}
17% {
opacity: 1;
transform: translateY(0%);
}
19% {
opacity: 0;
transform: translateY(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}<!DOCTYPE html>
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if gt IE 9]><!--><html><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> WebReality Holding Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="/css/main.css" />
</head>
<body>
<ul class="slideshow">
<li><span>Image 01</span></li>
<li><span>Image 02</span></li>
<li><span>Image 03</span></li>
<li><span>Image 04</span></li>
<li><span>Image 05</span></li>
<li><span>Image 06</span></li>
</ul>
<div class="container">
<header>
<img src="http://i.imgur.com/60tFZ1e.png" alt="logo"/>
</header>
<div class="form-section"
<section class="pw">
<!-- @import "/Partials/header.html" -->
<div class="contact-info">
<h2> We're here to help </h2>
<p> We help people plan, design, build and market their web and mobile projects. </p>
<div class="grid">
<div class="plan left">
<h3> Plan </h3> <p>
Wondering where to start? Let us draw you a map! Our wide experience means we usually have directly relevant insights when it comes to strategic planning. </p>
</div>
<div class="design right">
<h3> Design </h3>
<p> Design for digital media is a fast-changing specialist field. In the world of design, digital is all we do. Websites, apps, email marketing, branding, mobile vouchers... We make it beautiful. </p>
</div>
<div class="build left">
<h3> Build </h3>
<p> At heart, we're a technology business. We have deep skills in software development for web and mobile. Whether it's building what we designed, or working with your design partner, we can help. </p>
</div>
<div class="market right">
<h3>Market</h3>
<p>Plan it, design it, build it... now you need to feed it and get it seen.</p>
</div>
</div>
</div>
<form>
<label>
<input type="text" required />
<div class="label-text">Name</div>
</label>
<label>
<input type="text" required />
<div class="label-text">Email</div>
</label>
<label for="Message">Message:</label><br />
<div class="textbox">
<textarea name="Message" rows="20" cols="20" id="Message"></textarea>
</div>
<button>Submit</button>
</form>
<div style="clear: both;"></div>
</section>
</div>
<div class="band">
<div class="strip blue2"></div>
<div class="strip teal2"></div>
<div class="strip sand"></div>
<div class="strip salmon"></div>
<div class="strip blue3"></div>
</div>
<footer class="fw">
<div class="cta pw">
<p class="xlarge">Get in touch</p>
<p class="large"><span>01534 488888</span> or <a href="mailto:info@webreality.co.uk">email us »</a></p>
<p><span>2 La Chasse</span>, <span >St Helier</span> <span>JE2 4UE</span></p>
</div>
<ul class="share-buttons">
<li><a href="#" title="Share on Facebook" target="_blank"><img src="http://i.imgur.com/7kQQwLU.png" alt="Facebook Share"></a></li>
<li><a href="#" target="_blank" title="Tweet"><img src="http://i.imgur.com/zEUBZSI.png" alt="Twitter Share"></a></li>
<li><a href="#" target="_blank" title="Share on Google+"><img src="http://i.imgur.com/hNgPsyc.png" alt="Google+ Share"></a></li>
<li><a href="#" target="_blank" title="Post to Tumblr"><img src="http://i.imgur.com/vnwhljt.png" alt="Tumblr Share"></a></li>
<li><a href="#" target="_blank" title="Pin it"><img src="http://i.imgur.com/8g0gxyZ.png" alt="Pin it Share"></a></li>
<li><a href="#" target="_blank" title="Add to Pocket"><img src="http://i.imgur.com/rTqXncE.png" alt="Pocket Share"></a></li>
<li><a href="#" target="_blank" title="Submit to Reddit"><img src="http://i.imgur.com/ehb3wbL.png" alt="Reddit Share"></a></li>
<li><a href="#" target="_blank" title="Share on LinkedIn"><img src="http://i.imgur.com/tujqxUY.png" alt="LinkedIn Share"></a></li>
<li><a href="#" target="_blank" title="Publish on WordPress"><img src="http://i.imgur.com/EXy9FOK.png" alt="WordPress Share"></a></li>
<li><a href="#" target="_blank" title="Save to Pinboard"><img src="http://i.imgur.com/4qhISPT.png" alt="Pinboard Share"></a></li>
<li><a href="#" target="_blank" title="Email"><img src="http://i.imgur.com/ZEAJvU5.png" alt="Email"></a></li>
</ul>
</footer>
</body>
<!-- @import "/Partials/footer.html" -->
<!-- @import "/Partials/additional-code.html" -->
</body>
</html>
`
答案 0 :(得分：0)
这是我遇到过的最好的形式之一： - ）
<ul class="slideshow">
<li><span>Image 01</span></li>
<li><span>Image 02</span></li>
<li><span>Image 03</span></li>
<li><span>Image 04</span></li>
<li><span>Image 05</span></li>
<li><span>Image 06</span></li>
</ul>
http://codepen.io/damianocel/pen/GpyPMa
我不确定我是否明白这个问题，但请查看并告诉我。