2016-06-22 80 views
0

我想設置一些東西,我的背景可以根據用戶的瀏覽器寬度進行縮放,但我被綁定到外部樣式表中某個元素下的背景設置。我可以改變背景,我可以修改它的屬性,但我不能用html背景替換它。我可以在我的CSS樣式表中鏈接一個外部javascript嗎?

我一直在研究這個解決方案,其中大部分似乎並沒有工作。我甚至嘗試鏈接(在html中)一個外部JS,它檢測屏幕分辨率並相應地選擇一個bg文件,這正是我所需要的,只有瀏覽器根本無法檢測到它,無論是將該腳本嵌套在html中還是隻是鏈接它。所以我正在尋找一種將它鏈接到CSS中的bg設置下的方法。從我所讀的內容來看,這是「可能但有風險」,沒有真正的指示說明它是如何完成的。

儘管存在風險,我仍願意嘗試,但我也樂於接受其他建議。我需要的是能夠爲小手機和其他所有設置兩個不同的圖像文件(相同的圖像,只是縮放比例不同)。我已經看過srcset,但是需要嵌入到html中,所以對我來說是不行的,儘管我對它很興奮。我不介意自己實際編輯圖像。

+0

我怕標題,所以不敢看細節,我想答案是否定的。 – gevorg

+0

如果你想根據屏幕大小替換一個'background-image',我想你要找的是[媒體查詢](http://stackoverflow.com/questions/21441938/media-queries-loading - 不同圖像-取決於-屏幕上的尺寸)。 – neilsimp1

+0

歡迎來到StackOverflow。請添加您嘗試過的代碼。 – YakovL

回答

1

聽起來好像您正在尋找媒體查詢。您可以根據媒體功能設置特定的CSS。

有關媒體查詢的說明和示例,請參見W3Schools

+0

這正是我正在尋找的,謝謝。但它似乎不允許格式化。忽略查詢之外的格式,並且在查詢內部添加它會打破整個事件,使瀏覽器在加載時跳過整個部分。 [屏幕截圖](https://drive.google.com/open?id=0B2ulVSnB6jnFN0h5UkFPR082R1U) – saintace2213

2

我不確定你在CSS中的bg設置中的鏈接javascript是什麼意思。

但是你應該可以在CSS中使用媒體查詢設置不同的背景。看看https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

+0

這正是我一直在尋找的,謝謝。但它似乎不允許格式化。忽略查詢之外的格式,並且在查詢內部添加它會打破整個事件,使瀏覽器在加載時跳過整個部分。 [截圖](https://drive.google.com/open?id=0B2ulVSnB6jnFN0h5UkFPR082R1U) – saintace2213

+0

當你說格式化,你在談論格式化你的CSS?它應該得到支持。看看這個codepen,讓我知道如果這就是你想要做的:https://codepen.io/simiacode/pen/rLWZzz 隨意編輯和玩弄它。 – SpeedySan

+0

這很奇怪。使用你的代碼,它沒有問題,可能是因爲它沒有太多參數。與我的一樣,直到你看到所有格式都丟失了(在文本和標識上,使用他們自己的div類進行格式化),當你低於500時,沒有問題是顯而易見的。圖像也開始平鋪,而不是採取「封面」尺寸。事實上,他們似乎在分辨率降低到足以破壞格式之前就開始平鋪;我想這取決於圖像的寬度。 – saintace2213

相關問題