CSS Создать прозрачный div - PullRequest
Новая
       12

CSS Создать прозрачный div

5 голосов
/ 13 февраля 2011

Есть ли способ сделать HTML-элемент div полупрозрачным?

Ответы [ 4 ]

10 голосов
/ 13 февраля 2011

С помощью CSS это кросс-браузерное решение 

div {
    opacity: 0.5;
    filter: alpha(opacity = 0.5);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}
8 голосов
/ 13 февраля 2011

Это будет работать с каждым браузером 

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:”alpha(opacity=50)”;
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

Если вы не хотите, чтобы прозрачность влияла на весь контейнер и его дочерние элементы, отметьте этот обходной путь http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

4 голосов
/ 13 февраля 2011

Используя фоновый PNG-файл, который наполовину прозрачен, и надеясь, что вам не нужно поддерживать IE6?

0 голосов
/ 15 марта 2011

Если вы хотите, чтобы background вашего div был полупрозрачным, а не какой-либо текст и элементы внутри него, вы можете просто установить background-color в прозрачный-один (то есть с альфа <1). </p>

Один пример на нашем веб-сайте , свернутый пример здесь: 

<html>
<head>
  <title>Transparency test</title>
  <style type="text/css">
    body {
      background-image: url(http://www.fencing-game.de/style/background6.png);
    }
    #trans {
      background-color: rgba(255,0,0,0.5);
      max-width: 80ex;
    }
    p {
    max-width: 70ex;
    margin: auto;
    }
    #nontrans {
      background-color: rgb(255,255, 0);
    }
  </style>
</head>
<body>
  <div id="trans">
    <p>normal text</p>
    <p id="nontrans">nontransparent</p>
    <p>normal text</p>
  </div>
</body>
...