我试图将标题为白色的标题，但在徽标透明的地方，我希望标题是透明的，以便您可以看到标记。是否有任何方法可以使标题的一部分透明但其他所有标题都是白色的？正如你所看到的标识在标题内是50x50px，我希望那部分是全透明的
header {
width: 100%;
height: 165px;
z-index: 1000;
position: fixed;
top: 0;
left: 0;
border-bottom: 1px solid black;
background-color: white;
}
.content {
width: 960px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul li {
display: inline;
list-style: none;
}
nav ul li a {
text-decoration: none;
}<header>
<div class="content">
<img src="img/headerLogo.png" alt="NKO law firm company logo">
<nav class="main-navigation">
<ul>
<li><a href="firm">THE FIRM</a>
</li>
<li><a href="#team">TEAM</a>
</li>
<li><a href="#practiceArea">PRACTICE AREA</a>
</li>
<li><a href="#rankings">RANKINGS</a>
</li>
<li><a href="clients">CLIENTS</a>
</li>
<li><a href="theContacts">CONTACTS</a>
</li>
</ul>
</nav>
</div>
</header>
答案 0 :(得分：1)
Mabe像this？
section {
background:#ddd;
height:1000px;
}
header {
width:100%;
height:60px;
}
.logo {
position:relative;
float:left;
width:100px;
height:60px;
background:red;
opacity:.3;
}
nav {
position:relative;
float:left;
width: calc( 100% - 100px ); /* 100% - logo-width */
height:60px;
background:#eee;
}
}<section>
<header>
<div class="logo">Logo</div>
<nav>
<div>Rest of nav</div>
</nav>
</header>
</section>
答案 1 :(得分：1)
我想出了一些＆＃34; hacky＆＃34;解决方案，使用伪元素，允许您缩放大小。
我们发生的事情是我们没有直接在任何元素上设置背景颜色。相反，我们是＆＃34;伪造＆＃34;它做了三件事：
border-bottom添加到图像中，使其高度等于
标题的高度减去图像的高度，并设置它的高度
颜色为白色。:before伪元素添加到header，进行定位
顶部和左，背景颜色为白色，高度等于
标题的那个。使用calc设置其width即可
缩放到图像的左边缘，有效地隐藏它
作为计算结果，窗口宽度为960px或更小
将为零或负值。:after伪元素添加到header，将其置于顶部
＆安培;右边，背景颜色为白色，高度等于
标题的那个。真的＆＃34; hacky＆＃34; bit正在设置宽度
这里。使用calc减去:before元素的宽度
如果窗口宽度大于960px，则图像有效 -
小于此值:before宽度的负值导致
:after侵占图像。所以我们使用2个媒体查询
设置宽度，第一个就像窗口宽度时所解释的那样
大于960px，窗口宽度为第二个
960px或更低，只需使用calc减去宽度
图片来自标题的整体宽度。
body{
background:#ddd;
font-family:arial;
margin:0;
}
header{
border-bottom:1px solid #000;
height:165px;
width:100%;
left:0;
position:fixed;
top:0;
z-index:2;
}
header:before{
background:#fff;
content:"";
display:block;
left:0;
height:165px;
position:absolute;
top:0;
width:calc((100% - 960px) / 2);
z-index:1;
}
header:after{
background:#fff;
content:"";
display:block;
height:165px;
position:absolute;
right:0;
top:0;
z-index:1;
}
@media all and (min-width:961px){
header:after{
width:calc(100% - ((100% - 960px) / 2) - 50px);
}
}
@media all and (max-width:960px){
header:after{
left:50px;
}
}
.content{
width:960px;
margin:0 auto;
position:relative;
z-index:2;
}
img{
border-bottom:115px solid #fff;
height:50px;
width:50px;
}
nav{
float:right;
}
nav ul li{
display:inline;
list-style:none;
}
nav ul li a{
text-decoration:none;
}
main{
padding:176px 10px 10px;
}
main p{
margin:0 0 10px;
}<header>
<div class="content">
<img src="img/headerLogo.png" alt="">
<nav class="main-navigation">
<ul>
<li><a href="firm">THE FIRM</a></li>
<li><a href="#team">TEAM</a></li>
<li><a href="#practiceArea">PRACTICE AREA</a></li>
<li><a href="#rankings">RANKINGS</a></li>
<li><a href="clients">CLIENTS</a></li>
<li><a href="theContacts">CONTACTS</a></li>
</ul>
</nav>
</div>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus condimentum nulla. Maecenas rutrum non mauris nec finibus. Sed dictum rhoncus turpis quis suscipit. Aliquam quam tortor, aliquam et tristique vitae, tempus in est. Donec non eros ac enim fringilla pulvinar. Praesent aliquam velit vel lectus tincidunt mattis. Maecenas id vulputate est. Ut consequat placerat enim vel lacinia. Aenean nec mattis metus, id tempus diam. Nunc viverra est et nunc tincidunt, at ullamcorper magna blandit. Maecenas egestas lectus nunc, ac cursus erat ullamcorper nec. Curabitur ut imperdiet libero.</p>
<p>Donec lorem nisi, ullamcorper in ex eu, consequat tristique lorem. Pellentesque feugiat ultrices vestibulum. Integer aliquet sodales suscipit. Integer posuere non orci id commodo. Phasellus elementum velit purus, nec efficitur diam semper ut. Vivamus at lobortis velit. Aenean egestas vestibulum ante, nec laoreet lorem vestibulum non. Donec a velit augue. Donec varius vehicula volutpat. Proin quam arcu, sodales lobortis risus sagittis, gravida consequat dui. Praesent nec quam eu ligula ullamcorper gravida. Mauris et quam volutpat, blandit orci sit amet, convallis nibh. Proin maximus neque suscipit ex egestas, et scelerisque nisi blandit. Suspendisse nunc dui, ullamcorper vel metus non, condimentum tristique nisi. Nulla nunc mauris, euismod non velit ac, consequat fringilla lectus.</p>
<p>Ut nulla purus, dictum ultrices accumsan ultricies, tincidunt vitae libero. Pellentesque auctor nisl fringilla justo fringilla condimentum. Maecenas nisi lacus, tincidunt id consequat eu, auctor sollicitudin ex. Nulla vel ante a lectus pellentesque ornare. Sed id pulvinar dolor. Integer eget dui nulla. Fusce in orci nec nisi ultrices ultricies a sed urna. Proin rutrum tristique erat, id facilisis mi. Donec nec est et odio convallis porta.</p>
<p>Sed ornare convallis nibh ultricies bibendum. Cras condimentum tristique ipsum, eu aliquam tortor porta et. Quisque auctor erat at felis feugiat pretium. Etiam finibus pharetra libero, vel suscipit odio. Mauris placerat mollis nibh sed varius. Sed at ipsum sem. Aliquam dictum pulvinar feugiat. Aenean vel suscipit libero. Nullam fringilla massa dapibus tellus tincidunt, in blandit turpis bibendum. Phasellus ac congue diam. Fusce consequat facilisis sagittis. Duis non suscipit mi.</p>
<p>Aliquam et sodales ligula, vel porta nulla. Fusce quis ante dictum, porttitor odio quis, dictum arcu. Maecenas maximus tincidunt euismod. Aliquam mauris est, posuere eu nisl hendrerit, elementum bibendum sem. Aenean in est augue. Nulla maximus neque non eros imperdiet, at malesuada tortor viverra. Curabitur dolor est, eleifend quis velit quis, placerat condimentum mi. Pellentesque tempus orci sit amet lacus lacinia, venenatis vestibulum magna euismod. Donec rutrum dignissim orci, nec dignissim sem faucibus nec. Nullam vel gravida nunc.</p>
<p>Aliquam justo velit, porta nec venenatis et, fringilla ac nisi. Praesent pharetra nulla ut nibh tristique, ac vulputate orci elementum. Mauris erat turpis, aliquet id fringilla in, iaculis in quam. Proin tortor arcu, viverra non fermentum at, pretium quis sem. Vivamus in ex molestie, tempor sem sed, feugiat dui. Aenean imperdiet augue et sem laoreet, sit amet porta tellus tristique. Aliquam et dapibus tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ullamcorper vel lacus nec vulputate.</p>
<p>Sed sapien massa, laoreet vitae aliquam et, tincidunt in augue. Maecenas justo tellus, ullamcorper ut pellentesque non, pulvinar non mauris. Etiam eu molestie erat, ac tincidunt lectus. Morbi scelerisque dui malesuada justo venenatis, id porttitor sapien rhoncus. Vivamus sit amet turpis sit amet nibh elementum mollis eget in velit. Suspendisse hendrerit, felis at laoreet pharetra, magna lorem elementum tellus, vel vehicula arcu tortor in purus. Phasellus vehicula dui id dolor pellentesque imperdiet. Nam venenatis augue sed justo lacinia, et consequat nibh facilisis. Quisque auctor erat id sem tincidunt ultricies. Proin fringilla nisl at lectus viverra, sit amet rhoncus felis lobortis.</p>
<p>Suspendisse tempus imperdiet leo eget sollicitudin. Suspendisse blandit ultricies volutpat. Sed volutpat ligula id velit auctor, et eleifend sapien dictum. Aliquam in vestibulum odio. Donec metus orci, suscipit bibendum ex sit amet, fermentum facilisis sem. Morbi rhoncus turpis viverra dui lobortis auctor. Vestibulum sit amet ante metus. Sed ut ex id felis sollicitudin feugiat. Praesent lobortis convallis arcu, elementum malesuada sem dignissim vitae. Vivamus id vulputate nisl. Sed pulvinar vehicula lorem, vel imperdiet elit.</p>
<p>Proin orci erat, rhoncus ac fermentum nec, euismod non nisi. Sed ornare sapien vel interdum blandit. Duis odio sem, pretium ut diam non, tempus vestibulum mauris. Maecenas vitae sapien tempus, varius tortor posuere, ullamcorper purus. Nulla pulvinar quam ut orci tincidunt, eu sagittis ex aliquet. Donec vestibulum auctor est ac suscipit. Mauris tristique lacinia euismod. Nulla ante elit, ornare et luctus vitae, vehicula at ex. Nulla vel tristique dui. Nulla ac sagittis lectus. Curabitur auctor semper felis, et tempus turpis euismod eget. Morbi tempus auctor ante, nec volutpat leo accumsan sed. Nullam ullamcorper odio at nunc ornare porta. Cras at lacus dapibus, convallis lectus ut, elementum tortor. Sed at mauris mi.</p>
<p>Cras egestas mi libero, vel pharetra libero congue eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras pharetra, arcu quis tincidunt ullamcorper, arcu sem finibus justo, et luctus nunc justo in nunc. Fusce tempus fringilla diam a mattis. Ut nec est nisi. Fusce tristique nunc mauris, ut porttitor libero consectetur id. Donec libero orci, eleifend eget sagittis ut, venenatis ac justo.</p>
<p>Praesent auctor porta turpis at auctor. Quisque pulvinar nisi et dui convallis gravida. Aenean quis nulla neque. Pellentesque et erat at ipsum finibus ultricies. Curabitur eu euismod nulla, ac pretium augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris feugiat lacinia augue ac fermentum. Donec scelerisque finibus felis, vitae dignissim lorem ultrices in. Etiam convallis arcu sed libero convallis, non dictum dolor luctus. Etiam eget eros laoreet, ullamcorper justo quis, mattis nibh. Nullam mauris metus, aliquam at turpis vitae, luctus ullamcorper tortor. Nullam maximus posuere quam, id efficitur sapien.</p>
<p>Maecenas purus metus, egestas quis eleifend cursus, euismod nec quam. Suspendisse a volutpat ligula. Nulla dignissim lacus eget rutrum sollicitudin. Pellentesque commodo accumsan ultrices. Quisque porttitor orci laoreet, sollicitudin mauris vitae, sollicitudin velit. Nunc auctor volutpat efficitur. Sed tempor odio neque, ac vehicula dui tincidunt at. Nullam enim ex, fermentum non gravida faucibus, vulputate non augue. Praesent vulputate pharetra suscipit. Maecenas tempor venenatis leo ut ullamcorper. Cras cursus iaculis risus vel eleifend.</p>
<p>Nunc dictum lacinia leo eget venenatis. Sed aliquet scelerisque neque, a convallis nisl. Mauris tempus libero efficitur ornare molestie. Integer non finibus ex, vitae tempus massa. Donec quis sem erat. Maecenas consectetur, nibh ac porta feugiat, nisi mauris dictum quam, ac rhoncus nulla nibh in augue. Suspendisse tristique ligula ex, viverra fermentum nisi mattis a. Duis ullamcorper dapibus felis ornare maximus. Cras et hendrerit elit. Sed rutrum eleifend ante, ac interdum elit placerat ac. Duis a consequat lacus. Morbi congue orci eget est bibendum vehicula. Quisque nec erat nec sapien porta elementum vel eget libero. Donec condimentum tortor quam, eu porttitor erat lacinia non. Maecenas vitae laoreet massa. Aenean convallis erat a rhoncus fermentum.</p>
<p>Etiam augue enim, egestas vel auctor et, finibus nec mi. Cras vitae lectus vitae orci ullamcorper posuere. Aliquam enim massa, maximus eu nibh quis, rhoncus varius augue. Praesent quis libero diam. Cras ut sem tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec non felis ac eros vehicula lobortis. Vestibulum malesuada leo sit amet bibendum sollicitudin. Ut euismod blandit purus at egestas. Nulla pellentesque risus vel libero vehicula efficitur. Nam id facilisis diam, vestibulum pulvinar metus. Nullam arcu eros, iaculis vitae lectus eu, porttitor facilisis massa.</p>
<p>Duis pellentesque tellus semper quam convallis, non condimentum odio auctor. Maecenas vitae blandit libero. Vivamus facilisis felis et est malesuada feugiat. Aenean quis augue ut mauris ultrices molestie. Aenean a velit elit. Sed sit amet viverra ex. Sed facilisis tempor placerat. In metus metus, venenatis sed nisi sit amet, posuere ultrices arcu. Integer laoreet fringilla est, quis interdum sem imperdiet ut. Sed sagittis fringilla orci non ornare. Donec viverra leo ut justo feugiat eleifend. Fusce dapibus vel ligula non convallis. Cras sed suscipit nisl, in varius diam. Vestibulum imperdiet blandit imperdiet. Proin accumsan augue quis turpis viverra pharetra.</p>
<p>Phasellus elementum nibh ac efficitur commodo. Donec vestibulum velit felis, eget mollis libero maximus ut. Proin semper purus nec libero volutpat, non feugiat nisl pellentesque. Nam fringilla lacinia dui, at feugiat odio vulputate id. Aenean condimentum congue justo eu interdum. Pellentesque at quam felis. Nulla ac elementum orci, in tristique ante.</p>
<p>Quisque in nisi consectetur, egestas urna id, iaculis ligula. Etiam varius lacinia velit, sit amet convallis sapien dignissim a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut blandit diam. Nunc vehicula, urna sed iaculis volutpat, nisl ipsum tempus tellus, in tincidunt nulla ipsum sed purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse non tortor at mi blandit varius id at tellus. Maecenas congue et orci ut pharetra.</p>
<p>Proin rutrum laoreet velit, a finibus lorem interdum non. Proin pharetra sagittis commodo. Duis in diam in nunc accumsan dictum vitae vel orci. In vulputate nunc dolor, nec venenatis orci ultrices at. Sed convallis ipsum pharetra tellus sagittis, a malesuada magna laoreet. Duis dapibus fermentum viverra. Maecenas varius magna sit amet lacus accumsan viverra. Nullam erat massa, vulputate ut urna et, aliquam mollis sem. Maecenas lorem diam, suscipit gravida arcu sit amet, porta vulputate tellus. Proin varius placerat ligula. Phasellus et lacus sapien. Donec feugiat ut neque id rutrum. Maecenas luctus turpis enim, in cursus ipsum egestas eu. Aenean ornare dui mauris, quis consequat orci hendrerit at. In erat purus, vulputate eget lectus id, gravida semper elit.</p>
<p>Vestibulum tincidunt pellentesque velit, vitae aliquam neque convallis a. Curabitur sit amet lectus sit amet mi pharetra interdum vitae non enim. Sed molestie euismod metus sit amet ullamcorper. Nam porta consectetur laoreet. Nunc varius ultrices vestibulum. Morbi dignissim leo libero, eget rhoncus leo semper a. Suspendisse eget varius diam. Curabitur facilisis finibus erat, sit amet placerat neque faucibus a. Aenean id nisi lacus. Nunc vehicula, justo id pretium gravida, dui dolor posuere augue, id egestas enim tortor quis dui. Donec dictum aliquet arcu, in egestas tellus ornare et. Morbi feugiat vehicula lectus quis maximus. Mauris dictum, sapien et fringilla convallis, dui urna tristique nisl, id fermentum purus dui sed est. Pellentesque faucibus pretium pharetra.</p>
<p>Maecenas quam neque, faucibus non dapibus non, porttitor et diam. Fusce quis eleifend purus. Duis condimentum vitae tortor vel iaculis. Nulla porta ultricies semper. Phasellus sit amet neque lacus. Suspendisse egestas massa at imperdiet maximus. Nam ante justo, condimentum in malesuada et, cursus eu purus.
</main>
ASIDE： Here是我提供CSS之前正在处理的小提琴。