如何在内部div上显示背景图像
如何在内部div上显示背景图像
提问于 2018-08-17 04:22:29
我想在内部div上面显示背景图像。我该怎么做呢？
这是一个code pen，我的代码如下所示。
.adv-signup {position: relative; background: #ffffff url("https://s6.postimg.cc/ugw1p1pcx/sprite.png ") no-repeat left top;
width: 1000px; height: 500px;}
.contents {position: absolute; background: blue; width: 800px; height: 200px;top: 20px; left: 30px; }<div class="adv-signup">
<div class="contents">
<div class="text">
<h3>Sign up for E-News</h3>
<p>Leave your email and we’ll send you regular updates on programs, events and news.</p>
</div>
<div class="controls">
<input name="adv-sign-up-email-field" id="adv-sign-up-email-field" type="text" maxlength="255" value="Enter your email" />
<a href="#" class="btn"></a>
</div>
</div>
<div>
回答 1
Stack Overflow用户
发布于 2018-08-17 11:15:55
.adv-signup {
position: relative;
background-image: linear-gradient( #fff, #eff1f1);
width: 1000px;
height: 500px;
top: 0px;
left: 30px;
}
.contents {
position: absolute;
width: 1000px;
height: 400px;
margin: 1px red;
padding-top: 0px;
}
.contents .bg {
background: #ffffff url("https://s6.postimg.cc/ugw1p1pcx/sprite.png ") no-repeat left top;
margin: 0;
}
.text {
font-family: "Ubuntu";
font-weight: light;
color: white;
background-color: #2183c2;
}
.text h3 {
font-weight: bold;
}
.btn {
background: #0c5382;
}<div class="adv-signup">
<div class="contents">
<div class="bg">
<h1>test</h1>
</div>
<div class="text">
<h3>Sign up for E-News</h3>
<p>Leave your email and we’ll send you regular updates on programs, events and news.</p>
</div>
<div class="controls">
<input name="adv-sign-up-email-field" id="adv-sign-up-email-field" type="text" maxlength="255" value="Enter your email" />
<a href="#" class="btn"></a>
</div>
</div>
</div>
我就是这样做的
https://codepen.io/aspnetgal/pen/GBbPwp
但是在div之间不应该有enter code here间隙。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51884794
复制相关文章
相似问题