Нет атрибута "allowtransparency"

Я ищу альтернативный способ:

<iframe transparency=true   ...

Когда я выполняю проверку W3C, я получаю сообщение об ошибке:

Column 31: there is no attribute "allowtransparency"

Если вы используете этот CSS,

.iframe-trans-fix{
   opacity: 0;
   filter:alpha(opacity=0);
}

для вышеописанного фрагмента я получаю пустой iframe.

Ответы

Ответ 1

Хотя верно, что спецификация HTML W3C не определяет его, существует атрибут allowTransparency, и он поддерживается всеми современными браузерами (и Internet Explorer). Как HTML5 нас научил, тележка должна быть перед лошадью.

Предположим, что у вас есть этот HTML-код на главной странице, index.html:

<html>
    <body>
        <iframe src="source.html" 
                allowTransparency="true" 
                style="background-color:lightgreen;" 
                width="400" height="200">
        </iframe>
    </body>
</html>

И ваш source.html выглядит так:

<html>
    <body>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, magna
           id bibendum sollicitudin, tellus tortor consequat enim, et mollis mauris 
           augue et dui. </p>
    </body>
</html>

Когда вы открываете главную страницу (index.html) в своем браузере, вы увидите текст из source.html в iframe, но он будет иметь светло-зеленый фон.

(Протестировано с помощью Safari, Firefox и Chrome в Mac OS X и Internet Explorer 8 и Chrome в Windows XP)

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

Ответ 2

Я не уверен, что вы пытаетесь сделать здесь, но это должно быть то, что вы ищете:

iframe {
    background-color: transparent;
}

Это, конечно, предполагается, что вы хотите, чтобы фон iframe был прозрачным.

Ответ 3

Здесь вы можете сделать это с помощью jQuery, если вы включили файл jQuery -

<!--[if lt IE 9]><script> $(".classname").attr("allowTransparency", "true"); </script><![endif]-->

Измените .classname на имя вашего iframe или создайте его, если его нет. (Возьмите атрибут из iframe) Поместите это прямо после тега закрытия iframe и добавьте в требуемый тег allowTransparency для браузеров до IE9. Поскольку он находится в условном выражении IE, он не считывается валидатором W3C. Это также исключает кросс-браузерную совместимость и проблемы со скрытием содержимого с добавлением всех CSS, о которых уже говорили люди, если вы все равно используете последнюю версию jQuery. Атрибут allowTransparency был создан с четко определенной целью, поэтому нет смысла пытаться воссоздать его с помощью CSS, когда вы можете просто его вставить. Надеюсь, это поможет кому-то!

(Этот метод предполагает, что у вас уже есть iframe {background-color:transparent}, который не работает в старых версиях IE)

Ответ 4

  • Нет атрибута HTML с именем transparency, поэтому вы всегда будете получать сообщение об ошибке с iframe transparency=true

  • если вы установите непрозрачность на ноль, вы не увидите элемент вообще - вам нужно определить степень непрозрачности:

    opacity: 0.25; /* all modern browsers */
filter: alpha(opacity=25) /* IE */

Вышеприведенный CSS (примечание: значения непрозрачности 0-100 для IE, 0-1 для других браузеров) позволят отображать другие элементы (например, фоновое изображение страницы), даже если элемент с настройкой непрозрачности имеет цветной фон.

Подробнее об управлении прозрачностью см. RGBA (A = alpha), но обратите внимание на поддержку переменных браузеров.

Ответ 5

Во-первых, нет такой вещи, как "transparent =" true ", так что это не сработает.

Во-вторых, вы пытаетесь сделать прозрачный фон или весь прозрачный iframe?

Свойство CSS Opacity делает все внутри любого элемента, который вы используете на прозрачном. Непрозрачность масштабируется от 0 до 1, где 0 полностью просматривается, 0,5 - наполовину прозрачным, а 1 полностью видимым.

Если вы используете это в div или iframe (или что-то еще), фон и текст будут одинаково бледными.

С другой стороны, в каждом современном браузере вы можете установить, что задняя часть будет частично прозрачной, используя цвет RGBA. Вы должны сделать это следующим образом:

iframe.transparent {
    background-color: #FFF; /*this gives a background color for browsers that can't do RGBA color, like internet explorer*/
    background-color: rgba(255,255,255,0.5);
}

Определение цвета RGBA работает так же, как и атрибут непрозрачности (0 = clear, 1 = solid), за исключением того, что он делает только определенный элемент, который вы устанавливаете на прозрачном и не влияет на элементы внутри этого элемента (то есть он не влияет текст внутри вашего iframe). Первые три цифры - это красные, зеленые и синие значения вашего цвета по шкале от 0 до 255.

Если вы хотите улучшить кросс-браузерное решение, я бы рекомендовал использовать прозрачный .png файл в качестве фонового изображения. Вам нужно будет проверить это на IE, не уверен, что он будет работать для iframe специально, но вы не можете установить фон в iframe, а затем установить прозрачное изображение в качестве фона страницы, загружаемой внутри iframe (применить ее к элементу body для этой страницы).

Надеюсь, это поможет!