CSS定位/颜色

发布于 2025-01-06 09:16:43 字数 411 浏览 0 评论 0原文

我想要一个全灰色的背景，里面有一个较小的蓝色背景。

类似于

<body>
<div id= "background_1">
    <div id= "background_2">
    </div>
</div>
</body>

css 中的然后

#background_1
{
background-color : gray;
z-index : 1;
}
#background_2
{
background-color : blue;
z-index : 2; 
}

有人可以帮我解决这个问题吗？我知道这有点模糊，但我基本上想要一个全灰色的背景，前景中有一个较小的蓝色矩形。

原文

I would like to have an all gray background, with a smaller blue background inside it.

Something like

<body>
<div id= "background_1">
    <div id= "background_2">
    </div>
</div>
</body>

and then in the css

#background_1
{
background-color : gray;
z-index : 1;
}
#background_2
{
background-color : blue;
z-index : 2; 
}

Can anyone help me with this? I know it is a bit vague, but I basically want an all gray background, with a smaller blue rectangle in the foreground.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风向决定发型 2025-01-13 09:16:43

您的代码一切正常...但不需要 z-index 。

也许，将一些内容放入您的 div 中，或者修复它们的大小

编辑您的其他问题

// HTML
<body>
    <div id= "background">
    Test content
    </div>
</body>

// CCS
html,body
{
  margin:0 20px 0 20px;
  background-color : gray;
  height: 100%;
}
#background
{
  width:100%;
  height: auto !important; 
  height: 100%; 
  min-height: 100%; 
  background-color : blue;
}

您可以在此处查看结果：http://jsfiddle.net/Nz5WK/1/

Everything is ok with your code... but no need of z-index for that.

Perhaps, put some content into your divs, or fix their sizes

Edit regarding your other questions

// HTML
<body>
    <div id= "background">
    Test content
    </div>
</body>

// CCS
html,body
{
  margin:0 20px 0 20px;
  background-color : gray;
  height: 100%;
}
#background
{
  width:100%;
  height: auto !important; 
  height: 100%; 
  min-height: 100%; 
  background-color : blue;
}

You can see the result here : http://jsfiddle.net/Nz5WK/1/

回复收藏 0 原文

清风夜微凉 2025-01-13 09:16:43

z-index 仅适用于位置：相对、固定 或绝对。

另外，如果它看起来很旧，请考虑使用 border：

div { width:100px; height:100px; background:lightblue; border:50px solid gray;}

z-index only works on position: relative,fixed, or absolute.

Also, if it's old for looks, consider using border:

div { width:100px; height:100px; background:lightblue; border:50px solid gray;}

回复收藏 0 原文

残龙傲雪 2025-01-13 09:16:43

您可以通过将初始灰色背景应用于正文来消除其中一个分隔线：

body { background: gray }
body > div.blue { background: blue }

<body>
<div class="blue">
Some text.
</div>
</body>

请注意，在这种情况下，灰色部分的宽度将为 8px，由正文的默认边距定义。

或者，如果您希望蓝色部分占据整个屏幕，周围有灰色“边框”，您甚至不需要划分：

body { background: blue; border: 10px solid gray }

<body>
Some text.
</body>

You can eliminate one of the divisions by applying the initial grey background to the body:

body { background: gray }
body > div.blue { background: blue }

<body>
<div class="blue">
Some text.
</div>
</body>

Note that in this case, the grey part will be 8px wide, as defined by the body's default margin.

Or, if you want the blue part to take up the entire screen with a grey "border" around it, you don't even need the division:

body { background: blue; border: 10px solid gray }

<body>
Some text.
</body>

回复收藏 0 原文

~没有更多了~

关于作者

噩梦成真你也成魔

暂无简介

文章

751 人气

关注发私信

卷耳

文章 0 评论 0

关注

佚名

文章 0 评论 0

关注

℉服软

文章 0 评论 0

关注

qq_2gSKZM

文章 0 评论 0

关注

凉宸

文章 0 评论 0

关注

gyhjy

文章 0 评论 0

友情链接

文江博客

CSS定位/颜色

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

卷耳

佚名

℉服软

qq_2gSKZM

凉宸

gyhjy

友情链接

CSS定位/颜色

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

卷耳

佚名

℉服软

qq_2gSKZM

凉宸

gyhjy

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。