固定标头，带有坚固的bg颜色和透明的bg标志

Question

请稍等CSS帮助。 我需要根据PSD设计开发这个头，但不知道从哪里开始。 它是一个固定的标题，全宽和125px高，白色背景。它背后将是一个500px高的滑块。该网站的徽标将在1000px居中的包装内，具有透明背景，以便滑块图像显示出来。 这是设计的捕捉：

有什么想法可以做到吗？

Answer 1

修改 我会创建两个div。一个徽标没有背景颜色，另一个带背景颜色。看看下面的代码。 确保更改标题左侧的宽度时，您将在标题右侧更新它。

HTML：

<div class="header">
    <div class="header-left logo"><img src="logo.png" alt="logo" /></div>
    <div class="header-right"></div>
</div>

CSS：

.header {
    position: relative;
    display: inline-block;
    width: 100%;
    line-height: 0;
    font-size: 0;
}

.header-left {
    display: inline-block;
    width: 100px;
    height: 125px; 
}

.header-left {
    display: inline-block;
    width: calc(100% - 100px);
    width: -webkit-calc(100% - 100px);
    height: 125px; 
    background: #ffffff;
}

<强>原始 我会创建PNG，其中间的标识是透明的，左侧和右侧的1000px是白色的，并使用图像作为水平居中的背景。因为它只是白色，所以它不应该是一个大文件。