воскресенье, 16 ноября 2014
19:08

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

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



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

URL
Комментарии
16.11.2014 в 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 отдельно.
URL
16.11.2014 в 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...}

Но по мне это убиться можно)
URL
16.11.2014 в 19:31

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

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

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

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

Ника_Альтер
Здесь на каждого по три истины, и на всех одно заблуждение.
Тайя, которая душит романтиков, я фш открывать люблю и обожаю, но надо приучать себя также любить и коды)))
URL
17.11.2014 в 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, на него можно забить.
URL