0
私は、行のクラスを画像の底に貼り付けるように調整しようとしています。私はそれが底に固執して動かないようにしたい。私はスティックしたいセクションについてのコメントを追加しました。それはid #offerのフッタタグで始まります。位置区切りから画像の終わり
HTML:
<div id="ImageMain">
<ul id="nav">
<li id="brand"><a href="#">MINIMAL</a></li>
<li id="navm"><a href="#">Men</a></li>
<li id="navm"><a href="#">Women</a></li>
<li id="navm"><a href="#">Contact</a></li>
</ul>
<h1>Simplicity is Minimal</h1>
<a href="#" id="homeb">Shop Now</a>
<!--I'm trying to make this section stick to the bottom of #ImageMain-->
<footer id="offer">
<div class="row">
<div class="col-md-4" align="center">
<i class="fa fa-truck" aria-hidden="true"></i>
<h2>Fast Shipping</h2>
<p>Your order(s) are shipped out the next day with UPS Express Shipping. International orders are shipped out with DHL Express</p>
</div>
<div class="col-md-4" align="center">
<i class="fa fa-reply" aria-hidden="true"></i>
<h2>Easy Returns</h2>
<p>Not satisfied with our product? Sizing too big/small? We will accept your return and grant your money back/ship out your right size hassle free</p>
</div>
<div class="col-md-4" align="center">
<i class="fa fa-phone" aria-hidden="true"></i>
<h2>Caring Customer Service</h2>
<p>Our 24/7 customer service reps will help you with every question and have and will work to satifsy your needs</p>
</div>
</div>
</footer>
</div>
CSS:
#ImageMain {
background-image: url(https://techvibes.com/wp-content/uploads/2016/06/11169410_445386015628115_4871226287313974850_o.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 1000px;
text-align: center;
color: white;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}
#offer {
background-color: black;
padding: 40px;
opacity: 0.5;
margin-top: 263px; /* This is what I want to fix. I'm not sure of the code I have to use to position it to make it stick to the bottom and be able to resize-*/
}
#offer i, h2, p {
color: white;
}
#offer i {
font-size: 35px;
}
どうもありがとうございます! – RogerFedFan
@GabrielPozoあなたは大歓迎です:) –
最後の質問は、#offerセクションの不透明度が内部のテキストに影響しないようにする方法です。 – RogerFedFan