本文介绍了负边距和背景的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在下面的标记中,我只想为 .text div设置负边距,使其出现在 .image div。
< div class =wrap
< div class =image>< img src =imgage.jpg/>< / div>
< div class =text>文字背景< / div>
< / div>
.image {
overflow:hidden;
}
.text {
background:green;
padding:20px;
margin-top:-60px;
color:#FFFFFF;
overflow:hidden;
}
我设置了 .text ,但由于某种原因,它不会出现在图像上。只显示文本。您可以在这里看到问题:
如何解决它,而不使用绝对位置。
感谢。
解决方案
您可以简单地添加 position:relative; 到 .text
* {margin:0; padding:0;}。image {overflow:hidden;} image img {display:block;}。背景:绿色; padding:20px; margin-top:-60px; color:#FFFFFF; overflow:hidden;}< div class = > < div class =image> < img src =https://farm8.staticflickr.com/7550/15615231269_e5a66cbe16_z.jpg/> < / div> < div class =text>有背景< / div>< / div>
In the following mark up, I simply want to set the negative margin for the .text div so that it appears on the top of the .image div.
<div class="wrap"> <div class="image"><img src="imgage.jpg" /></div> <div class="text">text with background</div> </div> .image { overflow: hidden; } .text{ background: green; padding: 20px; margin-top: -60px; color: #FFFFFF; overflow: hidden; }
I have set the background for the .text, but for some reason it does not appear on the image. Only the text appears. You can see the problem here: http://jsfiddle.net/ovkn4egc/
How I can fix it without using the absolute position.Thanks.
解决方案
You can simply add position:relative; to .text
* { margin: 0; padding: 0; } .image { overflow: hidden; } .image img { display: block; } .text { position:relative; background: green; padding: 20px; margin-top: -60px; color: #FFFFFF; overflow: hidden; }
<div class="wrap"> <div class="image"> <img src="https://farm8.staticflickr.com/7550/15615231269_e5a66cbe16_z.jpg" /> </div> <div class="text">text with background</div> </div>
这篇关于负边距和背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!