html - фоном - прозрачный цвет текста css




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

Возможно ли, используя только CSS, сделать background элемента полупрозрачным, но содержимое (текст и изображения) элемента непрозрачным?

Я бы хотел сделать это без наличия текста и фона как двух отдельных элементов.

При попытке: 

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

Похоже, что дочерние элементы подвержены непрозрачности их родителей, поэтому opacity:1 относительно opacity:0.6 родителя.

Вы можете сделать с rgba color code используя css, как этот пример, приведенный ниже. 

.imgbox img{
  height:100px;
  width:200px;
  position:relative;
}
.overlay{
  background:rgba(74, 19, 61, 0.4);
  color:#fff;
  text-shadow:0px 2px 5px #000079;
  height:100px;
  width:300px;
  position:absolute;
  top:10%;
  left:25%;
  padding:25px;
}
<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
  <div class="overlay">
    <p>This is Simple Text.</p>
  </div>
</div>

В 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>

Вот плагин jQuery, который будет обрабатывать все для вас, Transify ( Transify - плагин jQuery, чтобы легко применять прозрачность / непрозрачность к фону элемента ).

Я время от времени сталкивался с этой проблемой, поэтому решил написать что-то, что облегчит жизнь. Сценарий составляет менее 2 КБ, и для его работы требуется только 1 строка кода, и она также будет обрабатывать непрозрачность фона, если хотите.

Вы можете использовать RGBA (red, green, blue, alpha) в CSS , что-то вроде этого:

Поэтому просто сделайте что-нибудь подобное в своем случае: 

p {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.6);
}

span {
  color: white;
}

Вы можете использовать чистый CSS 3 : rgba(red, green, blue, alpha) , где alpha - это уровень прозрачности, который вы хотите. Нет необходимости в JavaScript или jQuery.

Вот пример: 

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}

Вы можете решить эту проблему для Internet Explorer 8 (ab), используя синтаксис градиента. Формат цвета - ARGB. Если вы используете препроцессор Sass вы можете конвертировать цвета с помощью встроенной функции «ie-hex-str ()». 

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";

Если вы используете Less , вы можете использовать fade(color, 30%) .

Если вы парень Photoshop , вы также можете использовать: 

 #some-element {
  background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
 }

Или же: 

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}

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

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

Вот статья css3.info, Opacity, RGBA и компромисс (2007-06-03).

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

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

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

Что нам нужно сделать, так это присоединиться к обсуждению рабочей группы CSS и заставить их дать нам атрибут фона-непрозрачности! Он должен работать рука об руку с функцией нескольких фонов.

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

Вы можете добавить полупрозрачное фоновое изображение PNG вместо того, чтобы реализовать его в CSS, или разделить текст и div на 2 элемента и переместить текст над полем (например, отрицательный запас).

Иначе это будет невозможно.

РЕДАКТИРОВАТЬ:

Точно так же, как сказал Крис: если вы используете PNG-файл с прозрачностью, вы должны использовать обходное решение JavaScript, чтобы заставить его работать в отвратительном Internet Explorer ...

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

DEMO

Выход:

Соответствующий код: 

p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .6;
  z-index: -1;
}
/*** The following is just for demo styles  ***/

body {
  background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
  background-size: cover;
}
p {
  width: 50%;
  padding: 1em;
  margin: 10% auto;
  font-family: arial, serif;
  color: #000;
}
img {
  display: block;
  max-width: 90%;
  margin: .6em auto;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
  <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>

Поддержка браузера - Internet Explorer 8 и более поздние.

У CSS3 есть легкое решение вашей проблемы. Использование: 

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

Здесь rgba означает красный, зеленый, синий и альфа-значение. Зеленое значение получается из-за 255, а половина прозрачности получается с помощью 0,5 альфа-значения.

Это лучшее решение, которое я мог бы придумать, НЕ используя 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;
      /* These three lines are for transparency in all browsers. */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      filter: alpha(opacity=50);
      opacity: .5;
    }
<div class="container">
  <div class="content">
    Here is the content.
    <br />Background should grow to fit.
  </div>
  <div class="background"></div>
</div>

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

Используйте :before (или :after ) в CSS и дайте им значение непрозрачности, чтобы оставить элемент в его исходной непрозрачности. Таким образом, вы можете использовать: прежде, чем сделать faux-элемент и предоставить ему прозрачный фон (или границы), который вы хотите, и переместить его за контент, который вы хотите сохранить непрозрачным с z-index .

Пример ( fiddle ) (обратите внимание на то, что DIV с DIV класса просто обеспечивает некоторый контекст и контрастирует с цветами, этот дополнительный элемент на самом деле не нужен, а красный прямоугольник перемещается немного вниз и вправо, чтобы оставить видимым фон за элементом fancyBg ): 

<div class="dad">
    <div class="fancyBg">
        Test text that should have solid text color lets see if we can manage it without extra elements
    </div>
</div>

с этим CSS: 

.dad {
    background: lime; border: 1px double black; margin: 1ex 2ex;
    padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
    border: 1px dashed black; position: relative; color: white; font-weight: bold;
    z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
    position: absolute; background: red; opacity: .5;
    top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
    /*top: 0; right: 0; bottom: 0; left: 0;*/
    z-index: -1;
}

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

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

Просто откройте Photoshop , создайте 2x2 пиксельное изображение ( выбор 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');
}

фоновый цвет: RGBA (255,0,0,0.5); как упомянуто выше, лучший ответ просто поставлен. Говорить, что использование CSS3, даже в 2013 году, не просто потому, что уровень поддержки различных браузеров меняется с каждой итерацией.

Хотя background-color поддерживается всеми основными браузерами (не новостями для CSS3) [1], альфа-прозрачность может быть сложной, особенно с Internet Explorer до версии 9 и с цветом границы на Safari до версии 5.1. [2]

Использование чего-то вроде Compass или SASS действительно может помочь в производстве и совместимости с кросс-платформой.

[1] W3Schools: Свойство background-color CSS

[2] Блог Нормана: Контрольный список поддержки браузера CSS3 (октябрь 2012 г.)




цвет   фоном   фоновой   фона   фон   текста   сделать   прозрачным   прозрачный   прозрачность   полупрозрачный   поверх   наложить   картинку   картинки   как   для   html   css   opacity  


opacity