负边距和背景

扫码查看
本文介绍了负边距和背景的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在下面的标记中,我只想为 .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>  

$ b

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

DEMO

* {
    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>

这篇关于负边距和背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 02:33
查看更多