Форум Сайтостроение Веб-строительство

прозрачность фона

S
На сайте с 05.01.2010
Offline
80
Soxay
508

Есть полупрозрачный фон который задан через opacity. На нем лежит меню, фон кнопок которых прописаны через линейный градиент

background: #00468c;
background: linear-gradient(top, #004e9b, #001a33);
background: -moz-linear-gradient(top, #004e9b, #001a33);
background: -webkit-linear-gradient(top, #004e9b, #001a33);
background: -o-linear-gradient(top, #004e9b, #001a33);
background: -ms-linear-gradient(top, #004e9b, #001a33);

Фон кнопок получается полупрозрачный, можно избавиться от прозрачности в нем? Крайне не хотелось бы лепить картинки

Плюсоните если помог...
[Удален]
#1

А у кнопок если сделать opacity: 1 ?

S
На сайте с 05.01.2010
Offline
80
Soxay
#2

mrxmry, не вышло.

[Удален]
#3

Понятно, ну потому что они находятся в объекте, который сам по себе имеет прозрачность, и он не дает сделать более яркую прозрачность у дочерних объектов. Так...а попробуйте прописать у фона, на котором находятся кнопочки

position:relative;

z-index: 1000;

а у кнопочек:

position: relative;

z-index: 1500;

opacity: 1;

А не, так тоже не будет работать...=))). Щас че нить придумаем!

В общем я вижу только 1 вариант, но надеюсь кто-то из более опытных подскажет вариант попроще, вместо муторного этого:

Создать еще один блок вообще без фона и за пределами вашего полупрозрачного блока, сделать ему position: absolute; и сделать на нем ваши кнопочки, а так он абсолютно позиционирован - сдвинуть его прямо на тот полупрозрачный фон.

То есть вот так:

<div class="Полупрозрачный фон">

настроить ширину /высоту

</div>

<div class="блок меню">

<div class="кнопка1">Кнопка 1</div>

<div class="кнопка2">Кнопка 2</div>

</div>

Где "блок меню" будет position: absolute; и сдвинув его вверх он будет находится прямо поверх блока с прозрачным фоном, но так как он к нему не относится, его прозрачность не передастся блоку с кнопками.

ХЗ, может кто попроще посоветует..но я только так вижу выход...

Joker-jar
На сайте с 26.08.2010
Offline
154
Joker-jar
#4

Используйте для значения стиля background rgba и не парьтесь. Во всех современных адекватных браузерах будет работать.

S
На сайте с 05.01.2010
Offline
80
Soxay
#5

да, либо background-color: rgba(255, 255, 255, 0.5) для родителя, либо фон 1px полупрозрачной картинкой. Всем спасибо.

numer482
На сайте с 06.07.2011
Offline
44
numer482
#6
Joker-jar:
Используйте для значения стиля background rgba и не парьтесь. Во всех современных адекватных браузерах будет работать.

Только запишите, к примеру, так:

background-color: #fff;

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

Что бы старые браузеры смогли получить хоть какой то цвет:)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий