超連結樣式 圖與字的調整 字在底圖的上面

Posted on Edited on In , Views: Disqus:

 

當我想要做一個帶有圖片的超連結時，

Alternate Text

一、首先我會先想到在inline element（行內元素）<h4>tag裡放上圖片如下

<!DOCTYPE html>
<html>
<head>
    <style>
                            h4 {
                            background: url("http://i.imgur.com/MFFSzOg.png") left center/ 300px 30px no-repeat;
                            }
    </style>
</head>
<body>

    <h4>This is heading 4</h4>

</body>
</html>

JS Bin

指定該行h4文字範圍內，底圖位置水平靠左、垂直置中；底圖大小300px寬度、30px高度；圖片不重複。

但這方法變成圖片無法撐大，離我想要呈現的結果還差很遠。

 

二、再看另一種方式

使用虛擬類或元素來指定圖片與偏移位置

<!DOCTYPE html>
<html>
<head>
                            <meta charset="utf-8">
                            <title>JS Bin</title>

                            <style>
                            .logo {
                            width: 10em;
                            margin: 1em auto;
                            text-align: center;
                            font: 1.75em/1.5em Helvetica;
                            text-transform: uppercase;
                            }

                            /* Setup ribbons as pseudo-element backgrounds */
                            .logo::before, .logo::after {
                            content: "";
                            height: 60px;
                            display: block;
                            background: url("http://i.imgur.com/MFFSzOg.png") center center;
                background-size: cover;
                            }

                            /* Flip our top ribbon upside-down */
                            .logo::before {
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                transform: rotate(180deg);
                            }
                            </style>

</head>
<body>
                            <h1 class="logo">
        Keep<br />
        Calm<br />
        and<br />
        Stack<br />
        Overflow
                            </h1>
</body>
</html>

JS Bin

使用<h1>Tag配合Pseudo element ::after與 ::before來使用

這是利用Pseudo element來呈現另一種樣式，但不是我要的。

 

三、再看另一種方式

<!DOCTYPE html>
<html>
<head>
                            <meta charset="utf-8">
                            <title>JS Bin</title>

                            <style>
                            #container {
                            height: 400px;
                            width: 400px;
                            position: relative;
                            }

                            #image {
                            position: absolute;
                            left: 0;
                            top: 0;
                            }

                            #text {
                            z-index: 100;
                            position: absolute;
                            color: white;
                            font-size: 24px;
                            font-weight: bold;
                            left: 150px;
                            top: 350px;
                            }
                            </style>

</head>
<body>
                            <div id="container">
                            <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
                            <p id="text">
            Hello World!
                            </p>
                            </div>
</body>
</html>

JS Bin

於div裡面包含進圖片與文字，再對文字的顯現位置做調整。

 

四、於div裡面包含進圖片與文字，再對文字的顯現位置做調整，配何display屬性

<!DOCTYPE html>
<html>
<head>
                            <meta charset="utf-8">
                            <title>JS Bin</title>
                            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

                            <style>
        a {
                            position: relative;
                            left: -250px;
                            top: -20px;
                            }

                            #group > div {
                            display: inline;
                            }
                            </style>

</head>
<body>

                            <div id="group">
                            <div>
                            <img id="image" src="http://www.fujen.com.tw/DB/UserFiles/image/title_8_5.jpg" />
                            <a href="http://www.tmu.edu.tw/v3">
                台北醫學大學1
                            </a>
                            </div>

                            <div>
                            <img id="image" src="http://www.fujen.com.tw/DB/UserFiles/image/title_8_5.jpg" />
                            <a href="http://www.tmu.edu.tw/v3">
                台北醫學大學2
                            </a>
                            </div>
                            </div>

                            <div id="group">
                            <div>
                            <img id="image" src="http://www.fujen.com.tw/DB/UserFiles/image/title_8_5.jpg" />
                            <a href="http://www.tmu.edu.tw/v3">
                台北醫學大學1
                            </a>
                            </div>

                            <div>
                            <img id="image" src="http://www.fujen.com.tw/DB/UserFiles/image/title_8_5.jpg" />
                            <a href="http://www.tmu.edu.tw/v3">
                台北醫學大學2
                            </a>
                            </div>
                            </div>

</body>
</html>

JS Bin

於div裡包入img與a Tag，但如何把中間與右邊的空白去掉呢?

 

2.現在又加入學第一種做法(background)，

就是div裡不要放入img改於CSS裡對div使用background匯入圖片

<!DOCTYPE html>
<html>
<head>
                            <meta charset="utf-8">
                            <title>JS Bin</title>
                            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

                            <style>
                            #group > div {
                            display: inline-block;
                            width: 321px;
                            height: 63px;
                            background: url("http://www.fujen.com.tw/DB/UserFiles/image/title_8_5.jpg") no-repeat;
                            }
                            </style>
</head>
<body>

                            <div id="group">
                            <div>

                            <a href="http://www.tmu.edu.tw/v3">
                台北醫學大學1
                            </a>
                            </div>

                            <div>

                            <a href="http://www.tmu.edu.tw/v3">
                台北醫學大學2
                            </a>
                            </div>
                            </div>

                            <div id="group">
                            <div>

                            <a href="http://www.tmu.edu.tw/v3">
                台北醫學大學1
                            </a>
                            </div>

                            <div>

                            <a href="http://www.tmu.edu.tw/v3">
                台北醫學大學2
                            </a>
                            </div>
                            </div>

</body>
</html>

JS Bin

於div中指定寬與高撐大圖片，display指定inline-block做2*2排列。

 

3.又再加入學第二種做法使用Pseudo element

<!DOCTYPE html>
<html>
<head>
                            <meta charset="utf-8" />
                            <title>JS Bin</title>
                            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                            <style>
                            #group:before, #group:after {
                            display: table;
                            line-height: 0;
                            content: "";
                            }

                            #group:after {
                            clear: both;
                            }

                            #group {
            *zoom: 1;
                            }

                            #group > div {
                            float: left;
                            width: 321px;
                            height: 63px;
                            background: url("http://www.fujen.com.tw/DB/UserFiles/image/title_8_5.jpg") no-repeat;
                            }

                            #group > div > a {
                            position: relative;
                            top: 20px;
                            left: 70px;
                            }
                            </style>
</head>
<body>
                            <div id="group">
                            <div>
                            <a href="http://www.tmu.edu.tw/v3"> 台北醫學大學1 </a>
                            </div>
                            <div>
                            <a href="http://www.tmu.edu.tw/v3"> 台北醫學大學2 </a>
                            </div>
                            </div>
                            <div id="group">
                            <div>
                            <a href="http://www.tmu.edu.tw/v3"> 台北醫學大學1 </a>
                            </div>
                            <div>
                            <a href="http://www.tmu.edu.tw/v3"> 台北醫學大學2 </a>
                            </div>
                            </div>
</body>
</html>

 
JS Bin

float使用left、clear both、*zoom*1 for IE

 

參考資料：

Text On image HTML,css

float:left; vs display:inline; vs display:inline-block; vs display:table-cell;