Нет атрибута "allowtransparency" - PullRequest
Новая
       6

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

35 голосов
/ 18 сентября 2010

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

<iframe transparency=true   ...

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

Column 31: there is no attribute "allowtransparency"

Если использовать этот CSS, 

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

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

Ответы [ 5 ]

32 голосов
/ 03 марта 2011

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

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

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

Обновление: только что проверил это (март 2019) с использованием Safari 12, Chrome 73 и Firefox 65 на macOS High Sierra, и это все еще работает.

13 голосов
/ 18 сентября 2010

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

iframe {
    background-color: transparent;
}

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

4 голосов
/ 30 сентября 2011

Есть способ сделать это с помощью 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)

1 голос
/ 19 сентября 2010

Во-первых, не существует такой вещи, как '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 = прозрачный, 1 = сплошной), за исключением того, что он делает прозрачным только конкретный элемент, который вы установили, ине влияет на элементы внутри этого элемента (т.е. это не влияет на текст внутри вашего iframe).Первые три числа - это красные, зеленые и синие значения вашего цвета по шкале от 0 до 255.

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

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

1 голос
/ 18 сентября 2010

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

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

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

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

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

...