html - 修复了带有纯色背景和透明背景标志的页眉

Question

请在一些 CSS 帮助之后。我需要根据 PSD 设计开发此 header ，但不知道从哪里开始。这是一个固定的标题，全宽和 125 像素高，白色背景。它的后面是一个 500px 高的 slider 。网站的标志将在 1000 像素以内居中包装，具有透明背景，以便 slider 图像显示。这是设计的截图:

请问如何做到这一点？

Answer 1

编辑:我会创建两个 div。一个带有没有背景颜色的 Logo ，另一个带有背景颜色。看看下面的代码。 确保当您更改 header-left 的宽度时，您会在 header-right 中更新它。

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，其 Logo 在中间是透明的，左右各有 1000px，是白色的，并将图像用作水平居中的背景。因为它只是白色的，所以文件应该不会那么大。