iT邦幫忙

0

background-image無法顯示圖片

  • 分享至 

  • xImage

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 }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

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

codepen

把你的

.imgbox.image

image前面的點點往右移一格

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

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

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

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

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

/images/emoticon/emoticon82.gif

我要發表回答

立即登入回答