CSS3 линейный градиент + rgba, не совсем правда прозрачность - PullRequest
Новая
       45

CSS3 линейный градиент + rgba, не совсем правда прозрачность

4 голосов
/ 12 февраля 2011

У меня есть настройки страницы, которые выглядят примерно так: 

<body>
    <div id="wrapper">
        <!--- ... content ... -->
    </div>
</body>

Тело имеет цвет фона и мозаичное изображение, которое добавляет шум и зернистость фону.Кроме того, #wrapper имеет линейный градиент в качестве фона, который переходит от rgba (0,0,0, .3) к rgba (0,0,0,0), и градиент расширяется на 24 пикселя в верхней частиdiv, который находится вверху страницы --- для добавления тени.

Моя проблема в том, что цвет фона #wrapper, сохраняемый после создания градиента 24 пикселей, не является истинной прозрачностьюдаже если конечный цвет градиента имеет нулевое альфа-значение.Что меня оставляет, так это не совсем прозрачный фон на #wrapper, который оставляет видимую «линию разделения» на фоне тела в месте, где останавливается #wrapper.

Как получить градиентвойти в полную прозрачность?Я предположил бы, что альфа-значение ноля сделало бы это.Кроме того, использование ключевого слова transparent также не решает проблему.

Обновление

Я добавил фотографии, чтобы показать проблему.Первая картинка - это фактический вид, а вторая показывает, где линия, потому что она есть, хотя на первой картинке она очень непонятна.

actual look enter image description here

Когда вывидно, градиент не входит в истинную прозрачность.Не тогда, когда цвет указан как rgba(0,0,0,0) или transparent.

- Крис Буххольц

Ответы [ 3 ]

0 голосов
/ 02 февраля 2012

У меня была такая же проблема ... и я понял, что это потому, что я сохранял изображения в формате JPG.Вам нужно что-то, что поддерживает прозрачность.

0 голосов
/ 14 декабря 2012

Вы не предоставили свой код CSS. Это поможет лучше определить проблему. Но одной из возможных проблем, вероятно, является наложение свойств CSS. 

#wrapper {
  background: rgb(174,188,191);
  background: linear-gradient(to bottom, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);
}

Ожидаемый образец 

#wrapper {
  background: rgb(174,188,191);
  background: linear-gradient(to bottom, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);
  background: #111; /*Overrides the above properties*/
}

Вы перекрыли первое с другим свойством background, может быть, где-то в вашем CSS с более высоким приоритетом, в результате чего ваша прозрачность переопределена:

Образец переопределен

0 голосов
/ 15 февраля 2011

Вы тестируете его в браузере webkit (chrome / safari), Firefox, IE или Opera? Поскольку они все по-разному относятся к градиентам.

Я не совсем понимаю, хотя считаю, что вы должны рассмотреть возможность использования генераторов градиента CSS онлайн, большинство из них используют сплошные цвета, просто замените шестнадцатеричный десятичный на новый RGBA ().

Это лучший способ узнать, как ты ошибаешься.

Кроме того, если вы определили непрозрачность для div-оболочки, это может быть проблемой.

Это лучшее, что я могу сделать

...