Question

我在背景中有一个居中的图像，但我需要使用我的主背景颜色来拉伸图像并保持在中心。

这是身体背景的CSS

body{padding:0; margin:0; background:url(/b.jpg) center 10px no-repeat;}

这是主要背景的CSS

.main{background:#4e4645;}

我已经尝试了背景位置和边缘百分比而没有运气。

Answer 1

您可以使用margin: 0 auto将.main div集中在身体内。然后，您需要做的就是将.main的宽度设置为等于身体背景图像的宽度。

.main {
  margin: 0 auto;
  width: 300px;
  background: #4e4645;
}

请参阅DEMO。

Answer 2

这是你想要实现的目标吗？

http://jsfiddle.net/aX24s/1/

在示例中，我使用了两种背景颜色，显然替换了一个图像。我在内部div上放置了50％的不透明度，表明它们的尺寸完全匹配（一个块是亮绿色，一个是红色，所以颜色混合。）

你有两个相同大小的背景并且完全重叠。

HTML：

<body>
    <div class="outer_div">
        <div class="inner_div">
        </div>
    </div> 
</body>

CSS：

.outer_div {
    width:50px;
    margin:0 auto;
    height:50px;
    background-color:#dd0000;
}

.inner_div {
    background:#00dd00;
    width:100%;
    opacity:0.5;
    height:100%;
}

通过css居中背景颜色

2 个答案: