如何確定瀏覽器是否支持https資源

Question

我在舊瀏覽器上遇到了問題。 例如Safari for Windows。

我正在為div添加背景：

例如：

background-image: url('https://www.desktopbackgroundsi.net/wp-content/uploads/Picture_6.jpg');

網址不是https，僅舉例來說！

較舊的瀏覽器不會加載此圖像。 我如何解決此問題以顯示默認圖像。

Answer 1

您無需提及http或https。

就像下面這樣，它會自動獲取網址。

background-image: url('//www.desktopbackgroundsi.net/wp-content/uploads/Picture_6.jpg');

Answer 2

您可以檢查瀏覽器版本並動態地向您的元素添加一個類。

例如，要在不支持CSS3漸變時顯示不同的背景，您的代碼將如下所示：

.somediv {
   background: -webkit-gradient(linear, 0% 0%, 0% 100%,
     from(#660C0C), to(#616665), color-stop(.6,#0D0933)); }

.no-cssgradients .somediv {
   background: url('/images/gradient.jpg'); }

如果您想要發現哪個是用戶瀏覽器的版本，可以在此處使用此功能 。

Answer 3

舊版瀏覽器可能會遇到此問題，因為它們不會加載不安全的內容。 您在示例中提供的服務器證書無效，因此瀏覽器可能無法加載它（取決於其安全設置）。

也許嘗試使用合法安全連接托管的示例圖片： https ： //www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png