Question

我正在使用CSS hack来缩放图像，但是存在问题。

如果用户关闭样式表，则会显示用作背景的图像，有时图像非常大。

因此，我需要在没有样式表时隐藏背景div。

我已经考虑过通过JQuery动态添加图像，虽然这样做 - 它没有考虑是否没有样式表。

如果没有样式表，如何关闭图像或背景div？

感谢。

CSS

background {
 width: 100%;
 height: auto;
 position: absolute;
 left: 0px; 
 top: 0px; 
 z-index: -1;
}

.stretch {
 width:100%;
 height:100%;
}

HTML

<div id="background">
<img src="background_1200x800.jpg" class="stretch" alt="" />
</div>

Answer 1

你能把背景放在css文件中吗？

#id { background: url(background_1200x800.jpg) no-repeat center }

Answer 2

检查document.styleSheets集合以检测是否加载了样式表。

编辑：我知道这是一个黑客可以覆盖另一个黑客，但如何为图像添加display:none内联样式并在样式表中向弹性类添加display:block!important。

Answer 3

这样的事情怎么样（做这个onload）：

if(!$("style").length){
 $("#background").hide();
}

Answer 4

我之前的回答没有达到预期的效果，因为我错过了这个问题。但是以下内容对我有用：

<html>
   <head>
      <title>Background to fit screen</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

      <style type="text/css">
         html {height:100%;}
         body {height:100%; margin:0; padding:0;}
         #bg {position:fixed; top:0; left:0; width:100%; height:100%;}
         #fg {position:relative; z-index:1;}a
      </style>
   </head>
   <body>
      <div id="bg">
        <img class="stretch" src="background_1200x800.jpg" width="0" height="0">
      </div>
      <div id="fg">
        <p>content goes in the `fg` div.</p>
      </div>
      <style type="text/css">
         #bg img {width:100%; height:100%;}
      </style>
   </body>
</html>

我在FF3.5（在Vista上）测试了这个，当我使用Web Developer扩展来关闭所有样式时，实现了所需的效果（没有背景图像）。使用背景图像覆盖整个视口上的样式，内容位于图像的顶部。

我还快速浏览了IE7（在Vista上）和Chrome（在Vista上），两者都显示了覆盖整个视口的图像，内容放在顶部。我没有在FF3.5以外的浏览器中测试关闭样式。

我不知道身体中的第二个样式元素是否有效，或者它是否被认为是一个好主意或可憎的

Answer 5

只是一个想法而不是被测试......

HTML：

<div id="background">
<img src="background_1200x800.jpg" height="0" width="0" alt="" />
</div>

CSS：

div#background img {width: 100%; height: 100%}

点子：

默认情况下，将HTML图像属性设置为零。使用CSS覆盖维度...禁用CSS会让图像回退到自己的内联值。

Answer 6

我决定将它与图像保持一致，因为我认为它不是完全100％跨浏览器分辨率。

主题已关闭。

Jquery - 如果没有样式表，如何隐藏图像？

6 个答案: