检测对背景附件的支持：已修复？
有没有办法检测浏览器对后台附件的支持：修复？
编辑：虽然这个function在桌面浏览器上得到广泛支持，但它在便携式设备上的支持很差，我希望能够检测到该function。
当您使用{background-attachment：fixed}时，当前的移动设备根本不会显示背景图像！ 要确保图像显示在所有移动设备上，您需要测试支持，如果不支持将后台附件属性设置为“初始”（即默认状态）或“滚动”（这是默认状态） 。
坏消息：
目前无法直接和专门测试固定背景的支持，因为移动浏览器会错误地报告他们确实支持它。 要自己查看此错误，请在移动浏览器中加载此测试：
http://codepen.io/mattthew/pen/PwEqJa
function supportsCSS(value) { try { var style = document.body.style; if (!("backgroundAttachment" in style)) return false; var oldValue = style.backgroundAttachment; style.backgroundAttachment = "fixed"; var isSupported = (style.backgroundAttachment === value); style.backgroundAttachment = oldValue; return isSupported; } catch (e) { return false; } } var el = document.getElementById('result'); var txt = 'This device & broswer supports:
'; txt += '{ background-attachment:fixed; } : ' + supportsCSS('fixed') + '
'; txt += { background-attachment:foo; } : ' + supportsCSS('foo'); el.innerHTML = txt; 基于最初编写的代码：@chao
有限的选择：
可以使用多种方法间接测试支持。
选项1：在小屏幕上删除固定背景
此选项使用CSS媒体查询来定位较小的屏幕，以覆盖屏幕宽度为1024px或更小的设备上的样式（可能将固定背景渲染为不可见的设备）。 这个选项的优点是：它非常轻量级，只需要一点CSS：
#some_element { background-attachment: fixed; } @media all and (max-device-width: 1024px) { /* overwrite property for devices with screen width of 1024px or smaller */ #some_element { background-attachment: scroll; } }
不幸的是，有少量平板电脑品牌的屏幕宽度为1280像素和1366像素，与最小的桌面屏幕重叠（按CSS高度排序此列表 ）。 最安全的游戏是为此重叠区域使用滚动背景，以确保显示背景图像。 如果您想安全地使用它，请使用max-device-width：1366px。 然而，使用这些巨型平板电脑的人数远远小于使用小屏幕笔记本电脑的人数。
选项2：测试触摸事件和鼠标事件
此选项使用JS来测试浏览器是否支持触摸事件API，因此更有可能是在触摸屏设备上（设备更可能不会将固定背景渲染为不可见）。 这是重量级的选择。 它需要Modernizr和jQuery：
if(Modernizr.touch) { // this browser claims to support touch, so remove fixed background $('#some_element').css('background-attachment','scroll'); }
不幸的是，这个选项也有灰色区域。 有些浏览器会出现误报，有些浏览器会出现误报。 您可以测试鼠标事件，例如：
$('body').mousemove(function(event){ // this device (touch or not) has a mouse, so revert to fixed background $('#some_element').css('background-attachment','fixed'); $('body').unbind('mousemove'); });
但是，有可能将鼠标连接到不支持固定背景的触摸屏笔记本电脑上，因此代码会增加风险。
您可以查看document.body.style并确保这一点
- 那里有一个叫做“backgroundAttachment”的房产，和
- 您可以将其设置为“固定”，并在您执行此操作时保留其值。
Chrome，FF，Opera和Safari都忽略了将属性设置为无效值的尝试。 IE9会在您尝试时抛出exception。 因此，如果任何一个发生，那么肯定不支持该值。 （如果浏览器只是盲目地设置值并保留它，那么它仍然可能不起作用。但是那时，你真的不能让浏览器告诉你多少。）
function supportsFixedBackground() { try { var style = document.body.style; if (!("backgroundAttachment" in style)) return false; var oldValue = style.backgroundAttachment; style.backgroundAttachment = "fixed"; var isSupported = (style.backgroundAttachment === "fixed"); style.backgroundAttachment = oldValue; return isSupported; } catch (e) { return false; } }
我不再烦扰IE6，并且没有其他浏览器方便不支持固定背景，所以我无法测试设置“固定”。
我想我已经为所有设备提供了解决方案。 可以检测到clip支持，所以我就这样做，并在支持clip时对DOM进行了更改。 如果不是，它会回到background-attachment: fixed;
可以通过以下步骤检测对任何CSS属性值的支持：
- 创建一个临时元素（例如
DIV）; - 将其
styleDOM属性的值（在您的情况下为element.style.backgroundAttachment）设置为要检查的值（在您的情况下已fixed）; - 比较实际
style值与指定字符串。
在你的情况下这样的事情：
var elem = document.createElement('div'); elem.style.backgroundAttachment = 'fixed'; var isSupported = 'fixed' === elem.style.backgroundAttachment;
所有桌面浏览器均支持fixed ，IE6及更早版本除外。
大多数移动浏览器都支持它，但由于视口处理，您可能会看到一些差异。
资源
http://www.w3schools.com/cssref/pr_background-attachment.asp
页面上有一些主要浏览器图标的图片。 任何图标的图像都不会显示为灰色。 它表示它在所有浏览器中都受支持