MozTW 討論區
https://forum.moztw.org/

請問CSS高手大大.CSS有沒有辦法指定每張圖片中央出現文字?
https://forum.moztw.org/viewtopic.php?f=13&t=15198		 第 1 頁 (共 1 頁)
發表人:  noid [ 2006-08-11, 20:09 ]
文章主題 :  請問CSS高手大大.CSS有沒有辦法指定每張圖片中央出現文字?
就是.
小的的網站希望商品的圖片中央能出現網址...
目前的方法是用修圖軟體一張張改.
不知道有沒有辦法用CSS指定圖片中央會自己出現文字?
發表人:  不惑仔Boohover [ 2006-08-12, 01:02 ]
文章主題 : 
提供一下實際內容吧，包括圖片及尺寸，因為需要尺寸及內容才能知道如何去設計。
發表人:  kourge [ 2006-08-12, 21:36 ]
文章主題 : 
noid 寫:
就是.
小的的網站希望商品的圖片中央能出現網址...
目前的方法是用修圖軟體一張張改.
不知道有沒有辦法用CSS指定圖片中央會自己出現文字?

有方法可以做到。
HTML:
代碼:
<div id="blah">你要出現的字</div>


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


不過這樣只能左右置中，不能上下置中（上下置中實為天下麻煩語法之一）。
發表人:  風痕影 [ 2006-08-13, 02:02 ]
文章主題 : 
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 之所以要把網址蓋在圖片上...
是否是為了防止別人把圖拿去直接盜用呢？
如果真要做到那樣，或許用繪圖軟體加還是比較好的...
因為這樣加上去的話，原本的圖還是一樣沒有網址的 ＠＠
發表人:  不惑仔Boohover [ 2006-08-13, 10:21 ]
文章主題 : 
原本想說有尺寸再寫，比較不會讓po看不懂或搞混。

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

html如下:
代碼:
<div id="photo1" class="photos">網址</div>


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);}
發表人:  kourge [ 2006-08-14, 12:33 ]
文章主題 : 
風痕影 寫:
kourge 寫:
background-image: url(image.png) no-repeat;

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

orz
忘了...@@"
發表人:  noid [ 2006-08-15, 18:37 ]
文章主題 : 
風痕影 寫:

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


謝謝個位大大的幫忙囉~
對啊.小的是因為盜圖的問題....看來好像只有用繪圖的 = =?
第 1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/