修复了 Header 具有纯色 bg 颜色和透明 bg 徽标

Question

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

有什么办法可以做到吗？

Answer 1

编辑： 我会创建两个 div。一个带有没有背景颜色的徽标，另一个带有背景颜色。看看下面的代码。确保当你改变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，其徽标在中间是透明的，左右各有 1000px，是白色的，并将图像用作水平居中的背景。因为它只是白色的，所以文件应该不会那么大。

修复了 Header 具有纯色 bg 颜色和透明 bg 徽标

Fixed Header with solid bg color and transparent bg logo

html

css

transparency