拆分标题CSS

我想要一些关于如何完成将网站标题放在一起的输入;导航背景宽度应为100％，但问题是试图完成徽标形状周围的透明度。拆分标题CSS

我使用的是960像素宽度的容器，我希望徽标出现在左侧，然后继续使用绿色导航背景。任何想法，我怎么可能使用CSS完成这个？

这里的实体模型，这样你就可以看到想要的结果：

website header

我用于正在建设页治标不治本，这里是它的一个快照，也许这将指向你在正确的方向：

under construction

来源

2013-07-24 Seth Douwsma

您是否尝试过使用'与图像本身的透明边框radius'？ –

不知道您是否拥有Illustrator或Photoshop之类的Adobe产品，但您始终可以将图像制作为.png，这将对除图像本身之外的任何内容产生透明效果。 – Keith

在搜索时发现此问题：http://stackoverflow.com/questions/10501488/css-3-shape-inverse-circle-or-cut-out-circle/10503105#10503105 http://jsfiddle.net/PG4pM/74/ –

这是一种快速的版本，使这个http://jsfiddle.net/fxQej/。有可能是一种更快的方法，但至少这一个工程。

HTML：

<div class="container"> 
    <div class="back"> 
     <div class="nav"></div> 
    </div> 
</div>

CSS：

.container { 
    width:960px; 
    height:500px; 
    background-color:blue; 
} 
.nav { 
    width:960px; 
    height:90px; 
    background-image:url('http://i43.tinypic.com/n650qq.png'); 
    background-repeat:no-repeat; 
    background-position:70px 0px; 
} 
.back { 
    width:960px; 
    height:90px; 
    background-image:url('http://i39.tinypic.com/25inc3p.png'); 
    background-size:960px 45px; 
    background-repeat:no-repeat; 
    background-position:0px 25px; 
}

来源

2013-07-24 19:40:43 Keith

谢谢！这工作得很好！ –

回答

相关问题