Изменение прозрачности

[inex]

Добрый день, возникла вот такая проблемка:

Допустим есть вот такая конструкция

<input type="text" class="fade" name="login" id="login" />
input{
   border:1px solid red;
   color: #747474;
   background: url('image.png') no-repeat;
}
$(function() {
	$(".fade").css("opacity", "1");
	$(".fade").hover(function () {
		$(this).stop().fadeTo(300, 0.65);
	},
	function () {
		$(this).stop().fadeTo(300, 1);
	});
});

Прозрачность в итоге применяется ко всем свойствам(border,color,background) , можно ли как-то применить opacity только к backgroud?

Заранее спасибо!

Edited December 5, 2012 by inex

[npofopr]

Не проще в фотошопе сделать картинку прозрачной? :-)

Будет хоть более менее кросьраузерно)

[inex]

Не проще, интересует можно ли применять opacity к определенному свойству css

[SelenIT]

К сожалению, пока нельзя (насколько мне известно). Свойство background-opacity в W3C еще не пропихнуто . Единственный выход — делать картинку не фоном, а отдельным позиционированным элементом.

[inex]

Эх)) Ну будем ждать =(

[Kray Storm]

<input type="text" class="fade" name="login" id="login" />

Подскажите, а в каких случаях нужно использовать одновременно class, name и id в одном элементе?

Смотрю на код и в голове как-то не укладывается.

Это вроде как:

По class привязывается оформление, применяемое еще и к нескольким другим элементам, но которое нельзя применить ко всем <input> с атрибутом type="text" через input[type=text]{...} + использование скриптов, как в данном случае. По id дополняем каким-то уникальным оформлением для конкретного элемента. А по name определяем идентификатор для обработчика.

?

Edited December 6, 2012 by Kray Storm

[USF]

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

в связи с чем получается, что проще сделать полупрозрачным фон.

[hedgehog]

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

в связи с чем получается, что проще сделать полупрозрачным фон.

Могут, но только в сторону уменьшения непрозрачности, т.е. увеличения прозрачности

[Whatsup]

Добрый день, возникла вот такая проблемка:

Допустим есть вот такая конструкция

<input type="text" class="fade" name="login" id="login" />
input{
   border:1px solid red;
   color: #747474;
   background: url('image.png') no-repeat;
}
$(function() {
	$(".fade").css("opacity", "1");
	$(".fade").hover(function () {
		$(this).stop().fadeTo(300, 0.65);
	},
	function () {
		$(this).stop().fadeTo(300, 1);
	});
});

Прозрачность в итоге применяется ко всем свойствам(border,color,background) , можно ли как-то применить opacity только к backgroud?

Заранее спасибо!

Ты задаешь прозрачность Инпуту, при чем тут картинка ? Естественно он весь со всеми вложенными свойствами будет становиться прозрачным

[USF]

Могут, но только в сторону уменьшения непрозрачности, т.е. увеличения прозрачности

буду иметь в виду

[SelenIT]

По class привязывается оформление, применяемое еще и к нескольким другим элементам, но которое нельзя применить ко всем <input> с атрибутом type="text" через input[type=text]{...} + использование скриптов, как в данном случае. По id дополняем каким-то уникальным оформлением для конкретного элемента. А по name определяем идентификатор для обработчика.

Ну практически так. Класс — для общего оформления (чтоб CSS каждый раз не менять, один раз поставил и забыл). ID, применительно к input-у, может служить для привязки label. А name — совершенно верно, для серверсайда...

[inex]

А вообще, корректно ли использование одинаковых классов в разных подклассах, например

<div class="box1">
   <a class="link"></a>
</div>
<div class="box2">
   <a class="link"></a>
</div>
<div class="box3">
   <a class="link"></a>
</div>

.box1 a.link{color:red}
.box2 a.link{...}
.box3 a.link{...}

color применится только к ссылке внутри box1?или вот так будет лучше?

<div class="box1">
   <a class="link1"></a>
</div>
<div class="box2">
   <a class="link2"></a>
</div>
<div class="box3">
   <a class="link3"></a>
</div>

Edited December 6, 2012 by inex

[Whatsup]

А вообще, корректно ли использование одинаковых классов в разных подклассах, например

<div class="box1">
   <a class="link"></a>
</div>
<div class="box2">
   <a class="link"></a>
</div>
<div class="box3">
   <a class="link"></a>
</div>

.box1 a.link{color:red}
.box2 a.link{...}
.box3 a.link{...}

color применится только к ссылке внутри box1?или вот так будет лучше?

<div class="box1">
   <a class="link1"></a>
</div>
<div class="box2">
   <a class="link2"></a>
</div>
<div class="box3">
   <a class="link3"></a>
</div>

.box1 a.link{color:red} - селекторы потомков называются. То есть ты указываешь что в строчном элементе a с классом link находящемся в родителе с классом box1 цвет будет красный. Если у тебя например класс link стоит в другом родительском элементе как в примере выше, например box2 то ты можешь .box2 a.link{...} такой строчкой задать его любое свойство.

В примере ниже

<div class="box1">

<a class="link1"></a>

</div>

ты уже можешь задать цвет не таким способом - .box1 a.link1, а воспользоваться сокращенным вариантом - .link1

А вообще в данном примере

.box1 a.link1

.box1 > a.link1

a.link1

.link1

Будут обращаться к 1 и тому же элементу.

По этому ответ на твой вопрос - корректно. Все зависит от задачи. Но никто тебе не мешает писать путь до элемента как тебе угодно.

[hedgehog]

Могут, но только в сторону уменьшения непрозрачности, т.е. увеличения прозрачности

Обманул. В IE7-8 прозрачность наследуется только static элементами, а в IE9 - всеми элементами кроме тех, которым задано абсолютное позиционирование.