Вопросы Теги

Как дать тексту или изображению прозрачный фон с помощью CSS?

CPython - это сбор мусора, как только они выходят из области видимости, поэтому второй [] создается после сбора первого []. Таким образом, большую часть времени он попадает в ту же ячейку памяти.

Это показывает, что происходит очень четко (выход может отличаться в других реализациях Python): 

class A(object):
    def __init__(self): print "a",
    def __del__(self): print "b",

# a a b b False
print A() is A()
# a b a b True
print id(A()) == id(A())
2190
задан Paul D. Waite 18 April 2016 в 22:09
поделиться

10 ответов

Либо используйте полупрозрачное изображение PNG , либо используйте CSS 3: 

background-color: rgba(255, 0, 0, 0.5);

Вот статья из css3.info, Непрозрачность, RGBA и компромисс (2007-06-03). 

 
  Hello, World!
2236
ответ дан 22 November 2019 в 19:55
поделиться

Некоторое время назад я писал об этом в Кросс-браузерная прозрачность фона с помощью CSS .

Причудливый Internet Explorer 6 позволит вам сделать фон прозрачным и сохранить текст поверх полностью непрозрачным. Для других браузеров я предлагаю использовать прозрачный файл PNG.

10
ответ дан 22 November 2019 в 19:55
поделиться

Лучше использовать полупрозрачный .png .

Просто откройте Photoshop , создайте пиксель 2x2 image (выбор 1x1 может вызвать ошибку Internet Explorer! ), залейте его зеленым цветом и установите непрозрачность на вкладке «Слои» на 60%. Затем сохраните его и сделайте его фоновым изображением: 

<p style="background: url(green.png);">any text</p>

Конечно, он работает отлично, за исключением прекрасного Internet Explorer 6 . Доступны лучшие исправления, но вот быстрый взлом: 

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}
56
ответ дан 22 November 2019 в 19:55
поделиться

Непрозрачность фона, но не текста есть некоторые идеи. Либо используйте полупрозрачное изображение, либо наложите дополнительный элемент.

10
ответ дан 22 November 2019 в 19:55
поделиться

Проблема в том, что текст на самом деле имеет полную непрозрачность в вашем примере.

17
ответ дан 22 November 2019 в 19:55
поделиться

Самый простой способ - это использовать полупрозрачный фон PNG изображение .

Вы можете использовать JavaScript, чтобы он работал в Internet Explorer 6 , если вам нужно.

23
ответ дан 22 November 2019 в 19:55
поделиться

В Firefox 3 и Safari 3 вы можете использовать RGBA, например Георг Шелли упомянул .

Малоизвестный трюк заключается в том, что вы можете использовать его и в Internet Explorer. с использованием фильтра градиента. 

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

Первое шестнадцатеричное число определяет альфа-значение цвета.

Полное решение для всех браузеров: 

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

Это из прозрачности фона CSS без влияния на дочерние элементы, через RGBa и фильтры .

Скриншоты, подтверждающие результаты:

Это при использовании следующего кода: 

 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .transparent-background-with-text-and-images-on-top {
             background: rgb(0, 0, 0) transparent;   /* Fallback for web browsers that doesn't support RGBa */
            background: rgba(0, 0, 0, 0.6);   /* RGBa with 0.6 opacity */
             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  /* For IE 5.5 - 7*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  /* For IE 8*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>

Chrome-33 IE11 IE9 IE8

470
ответ дан 22 November 2019 в 19:55
поделиться

Вот как я это делаю (возможно, это не оптимально, но работает):

Создайте div , которым вы хотите быть полупрозрачный. Дайте ему класс / идентификатор. Оставьте пустым и закройте. Задайте ему заданную высоту и ширину (скажем, 300 на 300 пикселей). Задайте для него непрозрачность 0,5 или любой другой и цвет фона.

Затем, непосредственно под этого div, создайте еще один div с другим классом / идентификатором. Создайте внутри него абзац, где вы разместите свой текст. Задайте div position: relative и top: -295px (это отрицательное 295 пикселей). Дайте ему z-index 2 для хорошей оценки и убедитесь, что его непрозрачность равна 1. Оформите абзац так, как вам нравится, но убедитесь, что размеры меньше, чем у первого div , чтобы он не переполнялся.

Вот и все. Вот код: 

 .trans {opacity: 0.5; высота: 300 пикселей; ширина: 300 пикселей; цвет фона: оранжевый; } .trans2 {непрозрачность: 1; положение: относительное; верх: -295px; } .trans2 p {ширина: 295 пикселей; черный цвет; font-weight: жирный; } 
  
 
 
 
 text text text

Это работает в Safari 2.x, но я не знаю об Internet Explorer.

trans2 p {ширина: 295 пикселей; черный цвет; font-weight: жирный; } 
  
 
 
 
 text text text

Это работает в Safari 2.x, но я не знаю об Internet Explorer.

trans2 p {ширина: 295 пикселей; черный цвет; font-weight: жирный; } 
  
 
 
 
 text text text

Это работает в Safari 2.x, но я не знаю об Internet Explorer.

13
ответ дан 22 November 2019 в 19:55
поделиться

Для простого полупрозрачного цвета фона приведенные выше решения (CSS 3 или фоновые изображения) являются лучшими вариантами. Однако если вы хотите сделать что-то более сложное (например, анимацию, несколько фонов и т.д.), или если вы не хотите полагаться на CSS 3, вы можете попробовать "технику панели":

.pane, .pane > .back, .pane > .cont { display: block; }

.pane {
    position: relative;
}

.pane > .back {
    position: absolute;
    width: 100%; height: 100%;
    top: auto; bottom: auto; left: auto; right: auto;
}

.pane > .cont {
    position: relative;
    z-index: 10;
}

<p class="pane">
    <span class="back" style="background-color: green; opacity: 0.6;"></span>
    <span class="cont" style="color: white;">Hello world</span>
</p>

Эта техника работает за счет использования двух "слоев" внутри внешнего элемента панели:

  • один ("back"), который подгоняется под размер элемента панели, не влияя на поток содержимого,
  • и один ("cont"), который содержит содержимое и помогает определить размер панели.

Параметр position: relative на панели важен; он указывает заднему слою, что нужно подогнать его под размер панели. (Если вам нужно, чтобы тег

был абсолютным, измените панель с

на и оберните все это в тег absolutely-position

. )

Основное преимущество этой техники перед аналогичными вышеперечисленными заключается в том, что панель не обязательно должна быть определенного размера; как указано выше, она будет размещаться по всей ширине (обычная компоновка блочных элементов) и только до высоты содержимого. Внешний элемент панели может иметь любой размер, если он прямоугольный (т.е. inline-block будет работать, а обычный inline - нет).

Кроме того, это дает вам большую свободу для фона; вы можете поместить в задний элемент действительно все, что угодно, и это не повлияет на поток содержимого (если вы хотите несколько полноразмерных подслоев, просто убедитесь, что они также имеют position: absolute, width/height: 100%, и top/bottom/left/right: auto).

Один из вариантов, позволяющий регулировать вставку фона (через top/bottom/left/right) и/или закрепление фона (через удаление одной из пар left/right или top/bottom), заключается в использовании следующего CSS:

.pane > .back {
    position: absolute;
    width: auto; height: auto;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
}

Как написано, это работает в Firefox, Safari, Chrome, Internet Explorer 8 (и более поздних версиях) и Opera, хотя Internet Explorer 7 и Internet Explorer 6 требуют дополнительных CSS и выражений, IIRC, и, насколько я знаю, второй вариант CSS не работает в Opera.

На что следует обратить внимание:

  • Плавающие элементы внутри слоя cont не будут содержаться. Вам нужно убедиться, что они очищены или содержатся иным образом, иначе они выскользнут из нижней части.
  • Поля идут на элемент pane, а отступы - на элемент cont. Не делайте наоборот (поля на cont или подложка на pane), иначе вы обнаружите странности, например, страница всегда будет немного шире окна браузера.
  • Как уже упоминалось, все должно быть блочным или inline-block. Не стесняйтесь использовать
    s вместо s для упрощения CSS.

Более полное демо, демонстрирующее гибкость этой техники при использовании ее в тандеме с display: inline-block, а также с auto и конкретными widths/min-heights:

. pane, .pane > .back, .pane > .cont { display: block; } .pane { position: relative; width: 175px; min-height: 100px; margin: 8px; } .pane > .back { position: absolute; z-index: 1; width: auto; height: auto; top: 8px; bottom: 8px; left: 8px; right: 8px; } .pane > .cont { position: relative; z-index: 10; } .debug_red { background: rgba(255, 0, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0, 0.75); } .debug_green { background: rgba(0, 255, 0, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0, 0.75); } .debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
   Содержание панели.
 Содержание панели.   
 
   Pane content.
 Pane content.
 Pane content.
 Pane content.
 Pane content.
 Pane content.
 Pane content.
 Pane content.
 Pane content.
 Pane content.  
 
   Содержание панели.
 Содержание панели.  
 
   Pane content.
 Pane content.

А вот живая демонстрация широко используемой техники:

christmas-card-2009.slippyd.com screenshot

62
ответ дан 22 November 2019 в 19:55
поделиться

Это лучшее решение, которое я смог придумать, НЕ используя CSS 3. И оно отлично работает в Firefox, Chrome и Internet Explorer, насколько я могу судить.

Поместите контейнер DIV и два дочерних DIV на одном уровне, один для содержимого, другой для фона. И используя CSS, автоматически подгоните размер фона под размер содержимого и поместите фон фактически на задний план, используя z-index. 

.container { position: relative; } .content { position: relative; color: White; z-index: 5; } .background { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: Black; z-index: 1; /* Эти три строки предназначены для прозрачности во всех браузерах. */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: .5; }
 
 Вот содержание. 
 Фон должен увеличиться, чтобы соответствовать содержимому.
105
ответ дан 22 November 2019 в 19:55
поделиться
Другие вопросы по тегам:

Похожие вопросы: