background-image無法顯示圖片

css html

cute32346 2019-07-22 16:39:43 ‧ 6581 瀏覽

Hi 各位css/html的先進們,小妹又來了~

這次問題是想要做有自適應作用的圖片框, 可是完全沒有反應...
再麻煩各位撥空回答, 感激不盡~
另外,不知道為什麼貼上html的語法後語法都會消失 , 所以這裡的div標籤前面我都空了一格, 像這樣 < div>

Html如下:

< div class="imgbox">
< div class="imgbox-inner">
< div class="image" style="background-image:url(https://i.imgur.com/qzaFDFD.jpg)">
< /div>
< /div>

css如下:

.imgbox{
border:2px solid #000;
width:40%;
overflow:hidden;
position:absolute;

}
.imgbox-inner{
width:100%;
padding-top:75%;
height:0;
position:relative;
}
.imgbox.image{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}

看更多先前的討論...收起先前的討論...

ashuidg iT邦新手 5 級 ‧ 2019-07-22 16:51:19 檢舉

前面加四個空白就可以貼了，或是用```包起來

dragonH iT邦超人 5 級 ‧ 2019-07-22 16:54:00 檢舉

html 不是有插入程式碼可以用嗎

小魚 iT邦大師 1 級 ‧ 2019-07-22 16:54:51 檢舉

應該說前後都加 ``` 就可以貼了

dragonH iT邦超人 5 級 ‧ 2019-07-22 16:59:08 檢舉

@小魚

對不過我怕這樣說會造成誤解 XD

直接跟他說有個按鈕可以按最安全

另外

如果要在內文使用 html tag

可以用 \<a>

cute32346 iT邦新手 5 級 ‧ 2019-07-22 17:09:34 檢舉

了解~ 謝謝大家~ 上次就是沒注意到結果貼進來後html是空白一片哈哈哈

登入發表討論

直播研討會

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

直播中

1 個回答

dragonH

iT邦超人 5 級 ‧ 2019-07-22 16:52:31

codepen

把你的

.imgbox.image

image前面的點點往右移一格

.imgbox .image

回應 3
分享
檢舉

小魚 iT邦大師 1 級 ‧ 2019-07-22 16:56:28 檢舉

原來是 CSS選擇器的問題,
已經給你關鍵字了.

cute32346 iT邦新手 5 級 ‧ 2019-07-22 17:11:22 檢舉

不好意思打擾大家了這個問題實在是太尷尬了...

dragonH iT邦超人 5 級 ‧ 2019-07-22 17:12:22 檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

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邦幫忙