Jquery - Как скрыть изображения, когда нет таблицы стилей? - PullRequest
Новая
       2

Jquery - Как скрыть изображения, когда нет таблицы стилей?

0 голосов
/ 15 сентября 2009

Я использую CSS-хак, где изображение масштабируется, но есть проблема.

Если пользователь выключает таблицу стилей, отображается изображение, используемое в качестве фона, иногда изображение действительно очень большое.

Поэтому мне нужно скрыть фоновый 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>

Ответы [ 6 ]

2 голосов
/ 15 сентября 2009

Проверьте коллекцию document.styleSheets, чтобы определить, загружены ли таблицы стилей.

Редактировать: я знаю, что это хак для другого хака, но как насчет добавления встроенного стиля display:none к изображению и добавления display:block!important к классу растяжения в таблице стилей.

2 голосов
/ 15 сентября 2009

Вы можете поместить фон в файл css?

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

0 голосов
/ 01 октября 2009

Я решил оставить его с изображением, так как не думаю, что оно полностью на 100% разрешает браузер.

Тема закрыта.

0 голосов
/ 16 сентября 2009

Просто мысль и НЕ ИСПЫТАНО ...

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 отключен, чтобы изображение вернулось к собственным встроенным значениям.

0 голосов
/ 16 сентября 2009

Мой предыдущий ответ не дает желаемого эффекта, так как я неправильно понял вопрос. Однако у меня работает следующее: 

<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 для отключения всех стилей. Со стилями на весь view-порт накрывается фоновое изображение, а содержимое находится поверх изображения.

Я также быстро взглянул на IE7 (в Vista) и Chrome (в Vista), и оба показали изображение, покрывающее весь видовой экран с содержимым, расположенным сверху. Я не тестировал отключение стилей в браузере, кроме FF3.5.

Я понятия не имею, является ли второй элемент стиля в теле допустимым или считается хорошей идеей или мерзостью

0 голосов
/ 15 сентября 2009

как насчет этого (сделать это при загрузке): 

if(!$("style").length){
 $("#background").hide();
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...