标志在多个div一次

Question

我创建了一个网站，并设计了头

红色和蓝色是图像 黄河是一个导航栏 圆是一个标志 我的问题是，我我无法同时将徽标放在图像的div和导航div中。这甚至可能，或者我应该考虑一个新的设计。也许我错误地看着这个。

Answer 1

你的问题是关于在导航栏和div上都有相同的图像。

Pen here!

你可以用背景图像容易做到这一点，并设置相同的图像以及。

background-image: url(http://s.glbimg.com/jo/g1/f/original/2016/05/02/palestinian-gaza-daily_life_mohammed_abed_afp.jpg); 
    background-size: cover; 
    backgroud-position: center center; 

Answer 2

这可以使用纯CSS来实现。这是一种可能的方法来得到你想要的东西：

#one { 
 
    height: 100px; 
 
    background-color: blue; 
 
} 
 

 
#two { 
 
    position: relative; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    border-radius: 100px; 
 
    transform: translateY(40px); 
 
    margin: 0 auto; 
 
    z-index: 1; 
 
} 
 

 
#three { 
 
    position: relative; 
 
    height: 30px; 
 
    background-color: yellow; 
 
    bottom: -20px; 
 
}

<div id="one"> 
 
    <div id="two"> 
 
    </div> 
 
    <div id="three"> 
 
    </div> 
 
</div>

更换的div任何块级元素，它应该工作了。否则，您需要设置display: block。