不包围儿童内容

时间：2015-10-21 11:10:42

标签： css

我的表单部分div中的黑色背景并不包含在内容中。我已经尝试了内联块，但它仍然占据整个屏幕。我试图将透明的文本和表单包裹起来。如果有人可以帮助，那将是如此赞赏：）`

＆＃13;
＆＃13; 
@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 }
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

`

1 个答案:

答案 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

我不确定我是否明白这个问题，但请查看并告诉我。

相关问题
最新问题