Градиент от прозрачного до цвета в CSS

Мой босс дал мне изображение (см. Ниже) и сказал ему, что я сделаю его сайт одинаковым. Вот мой код, но он не выглядит, как на картинке:Градиент от прозрачного до цвета в CSS

HTML

<div class="clearfix" id="footer"> 
    <ul> 
    <li><a href="/pages/facility">Become a Virtual Active Facility</a></li> 
    <li><a href="/pages/about">About Us</a></li> 
    <li class="last"><a href="/pages/contact">Contact</a></li> 
    </ul> 
</div>

CSS

#footer { 
    background: -moz-linear-gradient(left center, white, white) repeat scroll 0 0 transparent; 
    margin-bottom: 25px; 
    margin-top: 25px; 
    opacity: 0.6; 
    padding: 10px 25px; 
    width: 914px; 
}

alt text

Как я могу получить результат, чтобы выглядеть так же ?

источник

2010-11-12 khanh

, потому что я не знаю, эффект делает это – khanh

I d не понимаете, что вы имеете в виду? 'opacity' должен делать это во многих браузерах. В чем ваш вопрос? –

Почему бы просто не сделать прозрачную панель в программе создания образов? – Kyle

Ваш градиент определяется как переход от «белого» в «белый». Другими словами, нет градиента.

В финальном 2014 синтаксисе:

background-image: linear-gradient(to right, transparent, white);

Обратите внимание, что префикс версии (moz-, webkit-, о-, и т.д.) использует другой синтаксис, для обратной совместимости.

источник

2010-11-12 10:44:13 Peter

В каком количестве браузеров это будет работать? –

Это будет работать с Firefox 3.6/Thunderbird 3.1/Fennec 1.0 и выше, так как это код, специфичный для Mozilla. Его единственная проблема заключалась в том, что код не делал то, что он хотел, поэтому я не предполагаю, что ему нужна помощь в создании кросс-браузера. Если ему нужно работать во всех браузерах, у него возникает другая проблема, потому что не все веб-браузеры являются графическими, чтобы начать с ... – Peter

спасибо. это полезно для меня. – khanh

Вы должны использовать альфа (RGBA) смотреть на это, может помочь вам: CSS3 Transparency + Gradient

источник

2010-11-12 10:45:13 Hannes

попробовать:

background: -moz-linear-gradient(left center, transparent, white) repeat scroll 0 0 transparent;

источник

2010-11-12 10:47:02 rgba255

Во сколько браузеров это будет работать? –

Это один работает для меня

background: -moz-linear-gradient(
       left, 
       rgba(0,0,0,0.001) 0%, 
       rgba(201,201,201,1) 50%, 
       rgba(0,0,0,0.001) 100% 
       );

Я использую его добавить некоторый эффект затухания на обеих сторонах моего hr

источник

2012-01-19 07:33:33 adedoy

Градиент от прозрачного до цвета в CSS

ответ

Смежные вопросы