Hyperlink text hidden

(I) Method one: use the span element

For example : When setting head logo on the page, click on the picture will automatically jump to a page, which is the use of hyperlinks add background images do

          But watch carefully you will find there is no hyperlink text part, are hidden, this is how to do it?

 

Methods : we can use to add a hyperlink in the span element , span style setting, Run the display: none ; to hide.

 

Code as follows:

<!--html代码部分-->
<header class="header">
   <div class="logo left">
                <h1>
                    <a href="">
                        <span>豆瓣</span>
                    </a>
                </h1>
    </div>
</header>

<!--css代码部分-->
 .header .logo a span{
     display:none;
 }

 

Renderings :

 

(Ii) Method Two: Set the Hyperlink style

⑴ First of all: the hyperlink height set to 0;

⑵ then: the padding: padding Top- set logo background image height (to squeeze down the text)

★ explanation: When we examine the elements, you will see, hyperlinks only padding (padding), and because the background is covered border, padding can still be seen in the background section, but the height of 0, which is its content area is zero, so that a set value of the padding, the text will be pushed down.

⑶ Finally: overflow hidden, to squeeze down the hidden text, set: overflow: hidden

 

Code as follows:

 .header .logo a{
     width: 154px;
     height: 0px;
     overflow: hidden;
     padding-top: 30px;
     display:block;
     background: url("img/logo_db.png") no-repeat ;
 }

 

Renderings :