居中图像并抵消它

Question

我正在尝试覆盖此徽标，使其位于页面底部，同时也将其全宽度偏移到左侧（以便徽标的右边缘坐在中心线上。

如果我在position:absolute上使用#logo，我可以访问top和left属性，这很好，但现在居中不起作用...... < / p>

Here's the fiddle.

另外：距离页面左边缘固定距离不起作用，因为页面是响应式的。徽标的右边缘必须完美地位于中心线上。

如果小提琴不起作用，则代码为：

HTML：

<div id ="layer1">
    <p>Hello</p>
</div>
<div id="layer2">
    <div id="wrapper">
        <img id="logo" src="http://i.stack.imgur.com/icxpG.png"/>
    </div>
</div>  

CSS：

body {
  background: linear-gradient(to left, #1a1a1a 50%, #f15922 50%);
}
#layer1 {
  position: absolute;
  z-index: 100;
  height: 100%;
  width: 100%;
}
#layer2 {
  position: absolute;
  z-index: 5000;
  height: 100%;
  width: 100%;
}
#wrapper {
  position: relative;
  background-color: rgba(255, 255, 255, 0.3);
  height: 100%;
}
#logo {
  background-color: rgba(255, 0, 0, 0.3);
  bottom: 0;
  display: block;
  margin-left: auto;
  margin-right: auto
}

Answer 1

您可以添加position: absolute;和transform以#logo为中心，如下所示：

JSFiddle - DEMO

#logo {
    background-color: rgba(255, 0, 0, 0.3);
    display:block;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
}

Answer 2

为了使图像在所有宽度处完美偏移，我们需要摆脱渐变，将第二个背景应用于身体的伪元素。

在这两个例子中，body提供橙色背景，body:before提供深色背景。

示例1 - 徽标是背景图像

calc(50% - 167px)抵消徽标。

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}
body {
  background: #f15922 url(http://i.stack.imgur.com/icxpG.png) calc(50% - 167px) bottom no-repeat;
}
body:before {
  width: 50%;
  height: 100%;
  background: #1a1a1a;
  content: '';
  display: block;
  position: absolute;
  right: 0;
}

示例2 - 徽标为<img>

right: 50%和bottom: 0将其保留在底部并偏移图像的自然宽度。

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}
body {
  background: #f15922;
}
body:before {
  width: 50%;
  height: 100%;
  background: #1a1a1a;
  content: '';
  display: block;
  position: absolute;
  right: 0;
}
#logo {
  position: absolute;
  bottom: 0;
  right: 50%;
}

<img id="logo" src="http://i.stack.imgur.com/icxpG.png" />

旧的存档示例（带渐变）

限制：某些视口宽度存在间隙，这是由渐变50％计算引起的。我不确定这是否可以避免。

存档1 - 将其全部保存在背景图像/渐变中

calc(50% - 167px)从中心偏移图像

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}
body {
  background: url(http://i.stack.imgur.com/icxpG.png) calc(50% - 167px) bottom no-repeat, linear-gradient(to left, #1a1a1a 50%, #f15922 50%);
}

已存档2 - 使用<img>

right: 50%和bottom: 0将其保留在底部并偏移图像的自然宽度。

body {
  background: linear-gradient(to left, #1a1a1a 50%, #f15922 50%);
}
#logo {
  background-color: rgba(255, 0, 0, 0.3);
  bottom: 0;
  right: 50%;
  position: absolute;
}

<img id="logo" src="http://i.stack.imgur.com/icxpG.png" />