Прочитайте, как обстоят дела у сайта Дневников и как вы можете помочь!
×
19:08 

Пнг-картинка поверх градиента.

Ника_Альтер
Здесь на каждого по три истины, и на всех одно заблуждение.
Здравствуйте.
Проблема такая: в качестве фона для кнопки меню я делала градиент, а поверх хотела поставить изображение. Но отображается только градиент. Можно ли что-то сделать, чтоб картинка поверх градиента всё-таки появлялась?
Код кнопки:


@темы: меню, фоновые картинки

Комментарии
2014-11-16 в 19:14 

Человек-Шаман
натюрморт с хомяками
Поставьте картинку не на фон кнопки, а на фон
#myDiaryLink a:before {
display: block;
content:"";
position:absolute;
left: 0;
top: 0;
background :url('/userdir/3/2/5/9/3259973/82075197.png') no-repeat;
}

И если уж делаете background-image, то не вставляйте туда no-repeat, делайте background-repeat:no-repeat отдельно.

2014-11-16 в 19:29 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
По-моему, это гемор, не стоящий усилий, не проще ли кнопку сделать в ФШ, с градиентом и надписью сразу?

Вот так совмещается в FF:
#myDiaryLink a {position: fixed; top: 16px; right: 690px; width:167px;height:59px; background:url('/userdir/3/2/5/9/3259973/82075197.png') no-repeat, -moz-linear-gradient(top, rgba(239,97,97,1) 0%, rgba(233,91,91,1) 0%, rgba(233,91,91,1) 0%, rgba(233,91,91,1) 1%, rgba(132,10,10,1) 51%); font-size:0px!important; box-shadow: 0px 0px 300px 40px #4e0100; border:1px solid#4e0100; border-radius:100px;}

То есть background: url, градиент - один раз background и через запятую, а не тчк с зпт.
Как остальные префиксы прописать, не знаю, мне кажется, нужно по отдельности:

#myDiaryLink a {background:url('/userdir/3/2/5/9/3259973/82075197.png') no-repeat, -moz-linear-gradient...}
#myDiaryLink a {background:url('/userdir/3/2/5/9/3259973/82075197.png') no-repeat, -webkit-linear-gradient...}
#myDiaryLink a {background:url('/userdir/3/2/5/9/3259973/82075197.png') no-repeat, -o-linear-gradient...}

Но по мне это убиться можно)

2014-11-16 в 19:31 

Ника_Альтер
Здесь на каждого по три истины, и на всех одно заблуждение.
Человек-Шаман, помогло, спасибо большое!

2014-11-16 в 19:32 

Ника_Альтер
Здесь на каждого по три истины, и на всех одно заблуждение.
Тайя, которая душит романтиков, По-моему, это гемор, не стоящий усилий, не проще ли кнопку сделать в ФШ, с градиентом и надписью сразу?
я хочу именно через коды сделать. Личный бзик)

2014-11-16 в 19:33 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Человек-Шаман, о, супер, тоже буду знать.

2014-11-16 в 19:35 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
~ V ~, понимаю, я тоже лучше с кодом повожусь, чем лишний раз фш открою)

2014-11-16 в 19:41 

Ника_Альтер
Здесь на каждого по три истины, и на всех одно заблуждение.
Тайя, которая душит романтиков, я фш открывать люблю и обожаю, но надо приучать себя также любить и коды)))

2014-11-17 в 09:55 

Kildor
Homo virtualis
шпиён администрации
группа [γ]
Можно через multiply backgrounds сделать. Поддерживается в современных браузерах.

Что-то вроде background: url('/userdir/3/2/5/9/3259973/82075197.png') no-repeat, linear-gradient(to bottom, rgba(239,97,97,1) 0%,rgba(233,91,91,1) 0%,rgba(233,91,91,1) 0%,rgba(233,91,91,1) 1%,rgba(132,10,10,1) 51%);
При этом градиент без префиксов, поскольку сейчас все браузеры поддерживают и градиенты, и наложенные фоны.
Единственная проблема с 8 ИЕ, не поддерживающего ни то, ни то, но поскольку это XP, на него можно забить.

Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

@CSS — стилизация дневников

главная