MozTW 討論區 • 檢視主題 - 請問CSS高手大大.CSS有沒有辦法指定每張圖片中央出現文字?

所有顯示的時間為 UTC + 8 小時

請問CSS高手大大.CSS有沒有辦法指定每張圖片中央出現文字?

第 1 頁 (共 1 頁)

[ 7 篇文章 ]

列印模式	上一個主題 \| 下一個主題

發表人

內容

noid

文章主題 : 請問CSS高手大大.CSS有沒有辦法指定每張圖片中央出現文字?

發表於 : 2006-08-11, 20:09

註冊時間: 2005-04-19, 12:38
文章: 25

就是.
小的的網站希望商品的圖片中央能出現網址...
目前的方法是用修圖軟體一張張改.
不知道有沒有辦法用CSS指定圖片中央會自己出現文字?

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

不惑仔Boohover

文章主題 :

發表於 : 2006-08-12, 01:02

註冊時間: 2005-11-23, 15:12
文章: 291
來自: 呆玩

提供一下實際內容吧，包括圖片及尺寸，因為需要尺寸及內容才能知道如何去設計。

_________________
時間，人為與自然的衝突。~不惑仔

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

kourge

文章主題 :

發表於 : 2006-08-12, 21:36

[網站管理員]

註冊時間: 2004-09-27, 09:24
文章: 1685

noid 寫:

就是.
小的的網站希望商品的圖片中央能出現網址...
目前的方法是用修圖軟體一張張改.
不知道有沒有辦法用CSS指定圖片中央會自己出現文字?

有方法可以做到。
HTML:

代碼:

<div id="blah">你要出現的字</div>

CSS:

代碼:

#blah {
height: 300px; /*圖片高度*/
width: 400px; /*圖片寬度*/
background-image: url(image.png) no-repeat; /*圖片位址*/
text-align: center; /*置中*/
}

不過這樣只能左右置中，不能上下置中（上下置中實為天下麻煩語法之一）。

_________________
korp + korp 中文站（沒精神更新）

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

風痕影

文章主題 :

發表於 : 2006-08-13, 02:02

[MozTW 版主群]

註冊時間: 2004-11-17, 09:53
文章: 1302
來自: 臺灣桃園

kourge 寫:

background-image: url(image.png) no-repeat;

kourge 大不小心寫錯了唷~~
既然後面跟著 no-repeat 的話...
開頭應該是 background 吧 ^^？
除非拆開來寫成這個樣子：

代碼:

background-image: url(image.png);
background-repeat: no-repeat;

kourge 寫:

不過這樣只能左右置中，不能上下置中（上下置中實為天下麻煩語法之一）。

除非用表格來排這個才會很簡單 XD

嗯，或許可以考慮把裡面的字再包一層 DIV
然後用 top: 50%; 讓他對齊在中央
不過，因為會是 DIV 的頂端對齊在中央
所以還要用 margin 往上橋半個字的高度：

代碼:

#blah div {
    position: relative;
    top: 50%;
    margin-top: -0.5em;
}

但是，我發現外面那個 DIV 也會被牽動到
所以又把它改成了這個樣子：

代碼:

#blah div {
    float:left;
    width: 100%;
    position: relative;
    top: 50%;
    margin-top: -0.5em;
}

不知道有沒有更簡單的寫法 ^^？

對了，有點好奇原 po 之所以要把網址蓋在圖片上...
是否是為了防止別人把圖拿去直接盜用呢？
如果真要做到那樣，或許用繪圖軟體加還是比較好的...
因為這樣加上去的話，原本的圖還是一樣沒有網址的＠＠

_________________
在靜謐的國度裡，擁抱微風－－抱風伴靜

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

不惑仔Boohover

文章主題 :

發表於 : 2006-08-13, 10:21

註冊時間: 2005-11-23, 15:12
文章: 291
來自: 呆玩

原本想說有尺寸再寫，比較不會讓po看不懂或搞混。

因為不知原作內容，以下均為假設狀況，圖片尺寸w120 x h100 px，由於要在圖片上秀字並上下置中，其實應該不會希望字是使用相對單位，以避免因瀏覽者放大字時超出圖片範圍(或是改變字的尺寸後也不會置中了)，所以字的尺寸單位使用絕對單位px，例如10px，此時包含該內容的行高也應指定為1(因為瀏覽器預設行高不是1倍字高)。

html如下:

代碼:

css如下:

代碼:

.photos{
font-size:10px;
line-height:1;/*使行高與字高相同為10px*/
padding:45px 0;/*上下padding90px+行高10px=100px，使div高度因此形成100px，字也會在高度的中間位置*/
width:120px;
background-repeat:no-repeat;
background-position:center center;
}

#photo1/*依照每張不同的圖片定義不同名稱*/
{background-image:url(圖片的uri);}

_________________
時間，人為與自然的衝突。~不惑仔

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

kourge

文章主題 :

發表於 : 2006-08-14, 12:33

[網站管理員]

註冊時間: 2004-09-27, 09:24
文章: 1685

風痕影寫:

kourge 寫:

background-image: url(image.png) no-repeat;

kourge 大不小心寫錯了唷~~
既然後面跟著 no-repeat 的話...
開頭應該是 background 吧 ^^？

orz
忘了...@@"

_________________
korp + korp 中文站（沒精神更新）

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

noid

文章主題 :

發表於 : 2006-08-15, 18:37

註冊時間: 2005-04-19, 12:38
文章: 25

風痕影寫:

對了，有點好奇原 po 之所以要把網址蓋在圖片上...
是否是為了防止別人把圖拿去直接盜用呢？

謝謝個位大大的幫忙囉~
對啊.小的是因為盜圖的問題....看來好像只有用繪圖的 = =?

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

第 1 頁 (共 1 頁)

[ 7 篇文章 ]

MozTW » 討論區首頁 » 特別議題 » 問題網站與網頁技術傳教

所有顯示的時間為 UTC + 8 小時

誰在線上

正在瀏覽這個版面的使用者：沒有註冊會員和 13 位訪客

您不能在這個版面發表主題
您不能在這個版面回覆主題
您不能在這個版面編輯您的文章
您不能在這個版面刪除您的文章
您不能在這個版面上傳附加檔案

前往 :