Как включить прозрачность в HTML / CSS? - PullRequest
Новая
       68

Как включить прозрачность в HTML / CSS?

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

Мне нужно, чтобы мои панель поиска и кнопка были слегка прозрачными ... вроде как твиттеры, когда мышь не зависает над ним. Как мне сделать это в html / css? CSS: 

.search1{
    position: absolute;
    font-family:"Arial Unicode MS";
    background-color:#CCCCCC;
    border-style:none     
}

.search2{
    position: absolute;
    border-style:none;
    font-family:"Arial Unicode MS";
    color:black;
    background-color:#CCCCCC;
    font-size:xx-large 
}  

input:hover{
    background-color:white;
    border-color:white;
}

HTML: 

<form class="search2" method="get" action="default.html" />
<input class="search2" type="text" name="serach_bar" size="31" maxlength="255"       
value="" style="left: 396px; top: 149px; width: 300px; height: 50px;" />
<input class="search1" type="submit" name="submition" value="Search" style=" padding-    bottom:20px; left: 710px; top: 157px; height: 17px" />
<input class="search2" type="hidden" name="sitesearch" value="default.html" />

Заранее спасибо, ребята!

Ответы [ 5 ]

3 голосов
/ 05 марта 2011

CSS 3 представляет значения цвета с альфа-каналами , но вам необходимо смешивать изображения для обратной совместимости. http://dorward.me.uk/www/css/alpha-colour/ имеет руководство.

Если вы также хотите использовать передний план, используйте взамен opacity (для некоторых версий IE требуется взлом).

1 голос
/ 05 марта 2011

Вы можете использовать opacity: 

opacity:0.5

И фильтр IE: 

filter:alpha(opacity=50);

Или CSS3 RGBA Цвета: 

background-color:RGBA(0,0,0,0.5);
1 голос
/ 05 марта 2011

Вы хотите использовать непрозрачность.Вам нужно будет добавить фильтр: альфа, чтобы он работал в браузерах IE.

Примерно так 

.searchBar {opacity: .7; filter:alpha(opacity=70);}
.searchBar:hover {opacity: 1; filter:alpha(opacity=100);}

Вот ссылка, объясняющая это http://www.w3schools.com/css/css_image_transparency.asp

1 голос
/ 05 марта 2011

Используйте 

 opacity

свойство .... (фильтр для IE)

попробуй 

#element{
     opacity:.5;
     filter: alpha(opacity = 50);
   }

и 

#element:hover{
    opacity:1;
    filter: alpha(opacity = 100);
}
0 голосов
/ 05 марта 2011

Это будет работать с каждым браузером, включая IE6 

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://jsfiddle.net/vnj4s/3/

...