2016-06-22 147 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

相关问题