CSS:仅在边距内的背景颜色

时间:2022-11-12 11:15:53

I have searched for an answer but couldn't find it anywhere. My question is reasonably simple: I have a background color of my body, then a large margin, and now I want a different background color inside the margin.

我已经找到了答案,但无法在任何地方找到它。我的问题相当简单:我有一个背景颜色的身体,然后是一个很大的边缘,现在我想在边缘内有不同的背景颜色。

How do I do that with CSS?

我如何用CSS做到这一点?

4 个解决方案

#1


37  

If your margin is set on the body, then setting the background color of the html tag should color the margin area

如果在主体上设置了边距,则设置html标签的背景颜色应该为边距区域着色

html { background-color: black; }
body { margin:50px; background-color: white; }

http://jsfiddle.net/m3zzb/

http://jsfiddle.net/m3zzb/

Or as dmackerman suggestions, set a margin of 0, but a border of the size you want the margin to be and set the border-color

或者作为dmackerman的建议,设置一个0的边距,但是你想要边距大小的边框并设置边框颜色

#2


12  

Instead of using a margin, could you use a border? You should do this with <div>, anyway.

你可以使用边框而不是使用边距吗?无论如何,您应该使用

执行此操作。

Something like this?CSS:仅在边距内的背景颜色

像这样的东西?

http://jsfiddle.net/GBTHv/

http://jsfiddle.net/GBTHv/

#3


3  

I needed something similar, and came up with using the :before (or :after) pseudoclasses:

我需要类似的东西,并想出使用:before(或:after)伪类:

#mydiv {
   background-color: #fbb;
   margin-top: 100px;
   position: relative;
}
#mydiv:before {
   content: "";
   background-color: #bfb;
   top: -100px;
   height: 100px;
   width: 100%;
   position: absolute;
}

JSFiddle

的jsfiddle

#4


0  

That is not possible du to the Box Model. However you could use a workaround with css3's border-image, or border-color in general css.

对于Box模型来说,这是不可能的。但是,您可以使用css3的border-image或一般css中的border-color的变通方法。

However im unsure whether you may have a problem with resetting. Some browsers do set a margin to html as well. See Eric Meyers Reset CSS for more!

但是我不确定您是否可能在重置时遇到问题。有些浏览器也为html设置了边距。请参阅Eric Meyers重置CSS以获取更多信息!

html{margin:0;padding:0;}

#1


37  

If your margin is set on the body, then setting the background color of the html tag should color the margin area

如果在主体上设置了边距,则设置html标签的背景颜色应该为边距区域着色

html { background-color: black; }
body { margin:50px; background-color: white; }

http://jsfiddle.net/m3zzb/

http://jsfiddle.net/m3zzb/

Or as dmackerman suggestions, set a margin of 0, but a border of the size you want the margin to be and set the border-color

或者作为dmackerman的建议,设置一个0的边距,但是你想要边距大小的边框并设置边框颜色

#2


12  

Instead of using a margin, could you use a border? You should do this with <div>, anyway.

你可以使用边框而不是使用边距吗?无论如何,您应该使用

执行此操作。

Something like this?CSS:仅在边距内的背景颜色

像这样的东西?

http://jsfiddle.net/GBTHv/

http://jsfiddle.net/GBTHv/

#3


3  

I needed something similar, and came up with using the :before (or :after) pseudoclasses:

我需要类似的东西,并想出使用:before(或:after)伪类:

#mydiv {
   background-color: #fbb;
   margin-top: 100px;
   position: relative;
}
#mydiv:before {
   content: "";
   background-color: #bfb;
   top: -100px;
   height: 100px;
   width: 100%;
   position: absolute;
}

JSFiddle

的jsfiddle

#4


0  

That is not possible du to the Box Model. However you could use a workaround with css3's border-image, or border-color in general css.

对于Box模型来说,这是不可能的。但是,您可以使用css3的border-image或一般css中的border-color的变通方法。

However im unsure whether you may have a problem with resetting. Some browsers do set a margin to html as well. See Eric Meyers Reset CSS for more!

但是我不确定您是否可能在重置时遇到问题。有些浏览器也为html设置了边距。请参阅Eric Meyers重置CSS以获取更多信息!

html{margin:0;padding:0;}