RWD (CSS 載圖片載不出來)

html css

Shihjoanna 2020-07-13 10:48:18 ‧ 1783 瀏覽

分享至

想要請問: 因想要用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;
}

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

ShawnL iT邦新手 1 級 ‧ 2020-07-13 12:46:49 檢舉

下方已經有人回答了，這裡補充有人寫的選擇器系列文章給你看看，或許有幫助！
https://ithelp.ithome.com.tw/articles/10222534

Shihjoanna iT邦新手 5 級 ‧ 2020-07-13 14:50:10 檢舉

非常謝謝大家~ 讓我扎扎實實的學到一課~

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2020-07-13 11:27:00

最佳解答

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

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

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

回應 2
分享
檢舉

Shihjoanna iT邦新手 5 級 ‧ 2020-07-13 11:35:28 檢舉

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

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2020-07-13 11:52:42 檢舉

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

登入發表回應

dragonH

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

codepen

打開你的 browser console

你的

left top no-repeat

看起來沒辦法用

回應 5
分享
檢舉

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

listennn08 iT邦高手 5 級 ‧ 2020-07-13 11:25:14 檢舉

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

Shihjoanna iT邦新手 5 級 ‧ 2020-07-13 11:38:42 檢舉

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

listennn08 iT邦高手 5 級 ‧ 2020-07-13 11:41:25 檢舉

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

Shihjoanna iT邦新手 5 級 ‧ 2020-07-13 12:04:09 檢舉

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

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

listennn08 iT邦高手 5 級 ‧ 2020-07-13 13:04:38 檢舉

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

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙