iT邦幫忙

1

RWD (CSS 載圖片載不出來)

想要請問: 因想要用css + html 做一個RWD 的table, 但在執行的畫面,圖片載不出來,不知道我下方的css是不是有哪邊錯了??可否請幫我看看~~

.rwd-table td:before {
content: url(picture.jpg) left top no-repeat;
font-weight: bold;
width: 6.5em;
display: inline-block;
}

下方附上圖片,灰框的地方,原本希望是:的前面能把圖片載出來,但圖片一直顯示不出來

http://www.winfartools.com.tw/test/test.jpg

ShawnL iT邦新手 4 級 ‧ 2020-07-13 12:46:49 檢舉
下方已經有人回答了,這裡補充有人寫的選擇器系列文章給你看看,或許有幫助!
https://ithelp.ithome.com.tw/articles/10222534
非常謝謝大家~ 讓我扎扎實實的學到一課~

2 個回答

1
㊣浩瀚星空㊣
iT邦超人 1 級 ‧ 2020-07-13 11:27:00
最佳解答

content 這個大多數都是用來插文字居多。插圖片的話。
很容易破壞版面。如果要在rwd用的話,更要小心使用。

一般圖片我會另外處理。
由於我很少用 content 來做url圖片

我查了一下文件,的確是沒看到top跟left、no-repeat的用法沒錯。
試了一下瀏覽器是會直接勿略這個。所以我想這部份因該是用錯了。
你可能要找其它方式來解決這個問題。

對!!! 因我在網路上看,全部幾乎都是在用文字描述,幾乎是沒有看到有人有用圖片的~ 原來是會破壞版面~ 真的是謝謝了! 因我的對css 真的不熟~ 語法上也是從網路上看來的~ 原本我已為會像content 把放入文字的語法改成載入圖片的路徑, 看來是我想得太簡單了! 謝謝指教!!!

其實他的確有載入圖片。只是不好用而已。所以我根本不會用他載圖片。

2
dragonH
iT邦超人 5 級 ‧ 2020-07-13 10:58:52

codepen

打開你的 browser console

你的

left top no-repeat

看起來沒辦法用

看更多先前的回應...收起先前的回應...

補充一下 因為是把圖放在 content
content 是內文不能算是 background 所以那些用 background 的參數就沒辦法使用
但是對於 before after content 是必要的

謝謝~~ 讓我學到了知識~ 我決定還是把它回歸成文字了~ 不載圖了~~

Shihjoanna
你要圖又不要破壞版面的話
原本放 content 的圖放到 background
content 放全形空白
寬度拿掉基本上就可以達成你的需求了

抱歉!! 請問: 是這樣子的意思嗎???

.something1 td:before {
content:&emsp ;
background: url(picture.jpg);
display: inline-block;
}

.rwd-table td::before {
	content: ' ';
	background: url(picture.jpg) left top no-repeat;
	font-weight: bold;
	display: inline-block;
}

我要發表回答

立即登入回答