CSS сброс непрозрачности? [Дубликат]

Добавить почтовый заголовок в функцию почты

$header = "From: noreply@example.com\r\n"; 
$header.= "MIME-Version: 1.0\r\n"; 
$header.= "Content-Type: text/html; charset=ISO-8859-1\r\n"; 
$header.= "X-Priority: 1\r\n"; 

$status = mail($to, $subject, $message, $header);

if($status)
{ 
    echo '<p>Your mail has been sent!</p>';
} else { 
    echo '<p>Something went wrong, Please try again!</p>'; 
}
2048
задан Paul D. Waite 18 April 2016 в 12:09
поделиться

19 ответов

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

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

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

2119
ответ дан 6 revs, 6 users 33% 21 August 2018 в 15:34
поделиться

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

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

Затем, НЕПОСРЕДСТВЕННО НИЖЕ, что div, создайте еще один div с другим классом / id. Создайте абзац внутри него, где вы разместите свой текст. Дайте div позицию: относительный и верхний: -295px (это НЕГАТИВНО 295 пикселей). Дайте ему z-индекс 2 для хорошей меры и убедитесь, что его непрозрачность равна 1. Создайте свой абзац, как вам нравится, но убедитесь, что размеры меньше, чем размеры первого div, поэтому он не переполняется.

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

.trans {
  opacity: 0.5;
  height: 300px;
  width: 300px;
  background-color: orange;
}
.trans2 {
  opacity: 1;
  position: relative;
  top: -295px;
}
.trans2 p {
  width: 295px;
  color: black;
  font-weight: bold;
}
<body>
  <div class="trans">
  </div>
  <div class="trans2">
    <p>
      text text text
    </p>
  </div>
</body>

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

13
ответ дан 5 revs, 5 users 57%paris ionescu 21 August 2018 в 15:34
поделиться
  • 1
    Дополнительный элемент можно избежать и вместо этого использовать псевдоэлемент, например :before или :after – frozenkoi 3 November 2013 в 09:03

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

. Известный трюк заключается в том, что вы можете использовать его в Internet & nbsp; 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 [/g4] IE11 [/g5] IE9 [/g6] IE8 [/g7]

456
ответ дан 8 revs, 7 users 42% 21 August 2018 в 15:34
поделиться
  • 1
    Это, похоже, отлично работает как в IE6, так и в IE7 ... спасибо! – philfreo 10 November 2009 в 02:07
  • 2
    Но не в IE8. Я пробовал синтаксис нового -ms-фильтра, но он все еще не работал для меня :( – philfreo 11 November 2009 в 19:16
  • 3
    Это сообщение показывает, как это сделать в IE8: robertnyman.com/2010/01/11/… – Slapout 20 August 2010 в 15:20
  • 4
    @philfreo: Если вы измените первый бит кода Себастьяна на «background: rgb (0, 0, 0) прозрачным; теперь он должен работать в IE8. Это довольно долго меня беспокоило! – Tom Chantler 8 February 2011 в 00:10
  • 5
    @AdrienBe - я отредактировал ваш ответ в соответствии с вашими инструкциями. К сожалению, я в течение некоторого времени отсутствовал в этом пространстве Q & amp; A, поэтому я не могу добавить к этому разговору в это время. – user664833 27 February 2014 в 21:41

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

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

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

span {
  color: white;
}
1
ответ дан Alireza 21 August 2018 в 15:34
поделиться

Обычно я использую этот класс для своей работы. Его очень хорошо.

.transparent {
  filter: alpha(opacity=50); /* internet explorer */
  -khtml-opacity: 0.5;      /* khtml, old safari */
  -moz-opacity: 0.5;       /* mozilla, netscape */
  opacity: 0.5;           /* fx, safari, opera */
}

0
ответ дан Cengkuru Michael 21 August 2018 в 15:34
поделиться

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

54
ответ дан Community 21 August 2018 в 15:34
поделиться

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

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

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


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

[2] Блог пользователя Norman: список поддержки браузера CSS3 (октябрь 2012 г.)

7
ответ дан DragonBear 21 August 2018 в 15:34
поделиться
23
ответ дан KesaVan 21 August 2018 в 15:34
поделиться

Есть более легкое решение для наложения над изображением на один и тот же div. Это неправильное использование этого инструмента. Но работает как прелесть, чтобы сделать этот оверлей с помощью CSS.

Используйте тень вставки следующим образом:

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

Вот и все:)

47
ответ дан Peter Mortensen 21 August 2018 в 15:34
поделиться
<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
    <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>

http://jsfiddle.net/x2ukko7u/ ?

3
ответ дан premgowda 21 August 2018 в 15:34
поделиться

Чтобы сделать фон элемента полупрозрачным, но содержание (текст и изображения) элемента непрозрачно. Вам нужно написать код css для этого изображения, и вам нужно добавить один атрибут с непрозрачностью с минимальным значением. например,

.image{
   position: relative;
   background-color: cyan;
  opacity: 0.7;
}

// меньшее значение будет больше прозрачности, иначе значение будет прозрачным.

6
ответ дан Pushp Singh 21 August 2018 в 15:34
поделиться
  • 1
    Это один из способов сделать это в современных браузерах. Я совмещаю его с значениями rgba как резервную – Tahir Khalid 14 July 2016 в 14:57
  • 2
    Да исправить. Это один из способов борьбы с современным браузером. – Pushp Singh 21 July 2016 в 13:05

Вы можете сделать с 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>

0
ответ дан Rudra 21 August 2018 в 15:34
поделиться

Это лучшее решение, которое я мог бы придумать, НЕ используя 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>

97
ответ дан Ruslan López 21 August 2018 в 15:34
поделиться
  • 1
    Он сказал: «Без разделения текста и фона в двух элементах, расположенных друг над другом». Спасибо в любом случае, это хорошее исправление и полезно, но в некоторых случаях вам нужно, чтобы непрозрачный элемент был дочерним элементом полупрозрачного. – Rolf 19 December 2010 в 18:24
  • 2
    Я ответил почти так же по другому вопросу, но добавил jsfiddle & amp; скриншоты (IE7 +), см. здесь, если интересно stackoverflow.com/a/21984546/759452 – Adrien Be 25 February 2014 в 19:40
  • 3
    @Gorkem Pacaci: Убедитесь, что свойства непрозрачности «действительно». кросс-браузер, вы можете использовать этот фрагмент кода из CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity – Adrien Be 27 February 2014 в 15:40
  • 4
    Почему бы не сделать это с псевдоэлементом вроде :after и избежать дополнительной разметки? – AndFisher 6 December 2016 в 10:07

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

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

Пример ( скрипт ) (обратите внимание, что DIV с классом dad просто для того, чтобы обеспечить некоторый контекст и контрастировать с цветами, этот дополнительный элемент на самом деле не нужен , а красный прямоугольник перемещается немного вниз и вправо, чтобы оставить видимый фон за элементом 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 (используйте значения нуля или что-то более подходящее для ваших нужд).

51
ответ дан Slipp D. Thompson 21 August 2018 в 15:34
поделиться
  • 1
    В какой ситуации вы бы не хотели использовать CSS3 для этого? – Burkely91 14 June 2015 в 02:23
  • 2
    @ Burkely91 Если вы можете сделать это в CSS3, тогда абсолютно используйте это. Но фон CSS3 не поддерживает все типы контента и полную гибкость. Приведенный выше пример огибающей / буквой трудно будет с помощью CSS3 из-за независимо повторяющихся ребер и центральных заливок. Кроме того, имейте в виду, что этот ответ был написан 5 лет назад, прежде чем поддержка CSS3 была широко распространена. – Slipp D. Thompson 4 January 2016 в 11:17
  • 3
    @Igor Ivancha Отправил ваши изменения. Извините, изменение отступа из моей предпочтительной формы (вкладки) на ваш (2 пробела) не круто. У вас могут быть веские причины использовать отступы с двумя пробелами в ваших ежедневных проектах кода, но для представления в Интернете я считаю, что вкладки имеют ясную победу - более глубокий отступ облегчает распознавание уровней иерархии, и это далеко проще надежно конвертировать вкладки в пробелы и, следовательно, является более совместимой формой всех читателей. – Slipp D. Thompson 6 February 2016 в 12:07
  • 4
    @Igor Ivancha Кроме того, похоже, вы запустили код, хотя создатель, который помещает каждый селектор и свойство CSS в свою собственную строку. Мои примеры были написаны с преднамеренными разрывами строк и интервалом, чтобы логически группировать фрагменты, которые следует понимать вместе читателем. большинство width: & amp; Свойства height: имеют одну линию, потому что они являются одним и тем же типом конструкции и лучше понимаются как двумерная форма, а не пара одномерных ограничений. Кроме того, некоторые из строк имеют достаточную сумму, упакованную в них, потому что это повторяющийся контент, который не так важен, чтобы хвастаться. – Slipp D. Thompson 6 February 2016 в 12:11
  • 5
    @Igor Ivancha Логическая организация, группировка и стилизация чрезвычайно важны для написания нормального, понятного кода, так же как и для всех видов написания. Изменения, которые вы внесли, были эквивалентом того, что вы вошли в сообщение кого-то и удалили все перерывы абзацев, и после каждой фразы вставили вынужденную новую строку. Если бы вы хотели быть настолько глупым педантом в своей собственной работе, хорошо, вы можете это сделать. Но, пожалуйста, не опускайте семантический характер и выражение в чужой работе. – Slipp D. Thompson 6 February 2016 в 12:15

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

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

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

7
ответ дан Touhid Rahman 21 August 2018 в 15:34
поделиться

Вы можете использовать цвет RGB с непрозрачностью, подобный этому цветовому коду в RGB (63,245,0), и добавить непрозрачность (63,245,0,0,5), а также добавить RGBA вместо RGB. Использование для непрозрачности

div{
  background:rgba(63,245,0,0.5);
  }

-2
ответ дан Vijay Sharma 21 August 2018 в 15:34
поделиться
55
ответ дан Community 1 November 2018 в 09:05
поделиться
50
ответ дан Peter Mortensen 1 November 2018 в 09:05
поделиться
56
ответ дан Slipp D. Thompson 1 November 2018 в 09:05
поделиться
Другие вопросы по тегам:

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