0

How can I make a semi-transparent element with text in it which goes on top of one navigation bar, but goes under the other? I am trying to make an effect like in http://hongkong.grand.hyatt.com/en/hotel/home.html where the red Hyatt logo and "hong kong" go above [over] the brown bar, but below the white (top of screen). https://www.dropbox.com/s/xarl3qe3ncxrdm1/Untitled20130520174504.jpg?v=0rc-s

4

2 回答 2

0

You'll just need to use various z-index values for the arrangement and opacity to get the transparency.


(source: snag.gy) 

#topbar {
    height: 20px;
    width: 100%;
    position: fixed; /*so it doesn't scroll with the page*/
    left: 0;
    top: 0;
    z-index: 3; /*the bar on top gets the highest index because it's above everything else*/
}
#secondtopbar {
    height: 20px;
    width: 100%;
    position: fixed;
    top: 20px;
    left: 0;
    z-index: 1; /*the second bar on top gets the lowest index because it's below everything else except the text, with doesn't even get a z-index*/
}
#logo {
    opacity: 0.5; /*this makes it half-transparent, on a scale from 0-1*/
    height: 100px;
    width: 100px;
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 2; /*the logo gets the middle index because it's in between*/
}
于 2013-05-21T00:50:23.943 回答
0

What type of a solution are you searching for? If you check out what the Grand Hyatt did, they're using an image and setting position: absolute to place it where they want it to appear.

If you do not want to use an image, you could use some HTML elements layered on top of each other to recreate the logo: See here http://jsfiddle.net/U3mCz/

Couple of notes:

  • You'll have to set a lower z-index on the parent of the logowrapper (in my example, anything under 500 will work), so that the logo stays on top.
  • You'll need to adjust your css on the logowrapper to position the logo where you want it.
  • If you adjust the height of the red bar, make sure you set your line-height equal to the height of the red bar to ensure vertical-centering of your text!

Hope that helps you out.

于 2013-05-21T01:15:33.103 回答