Поддерживает ли CSS3 использование как изображения, так и градиента для фона одного <div>?

Question

Я знаю, что вы можете создать несколько фонов на одном <div> в CSS3, но возможно ли смешать фон с ссылками на изображения (например, url(...)) с фоном, создающим градиент (например, -moz-linear-gradient(...))?

Если да, то каков синтаксис?

Если нет, какова наилучшая практика для достижения того же результата?

Спасибо.

Answer 1

Можно!

background: -moz-linear-gradient(-45deg, rgba(0,0,255,0), rgba(0,0,255,1)), url("image");

, который можно увидеть вживую на http://software.hixie.ch/utilities/js/live-dom-viewer/saved/675.

Обратите внимание, конечно, что CSS-градиенты все еще находятся в движении.

Answer 2

Я предполагаю, что вы пытаетесь использовать условные градиенты там, где это поддерживается, но в противном случае изображение?

Если это так, то одним из способов будет сделать это через Javascript - например:

document.getElementById("whatever").style = "url(...)";

Я не уверен, как именно проверить тип браузера, но это должен быть простой поиск в Google.

---

Однако, если вы пытаетесь сделать так, чтобы изображение накладывалось на градиент, но было прозрачным (чтобы просвечивала часть градиента), вы можете попробовать то, что описано здесь: http://www.css3.info/introduction-opacity-rgba/

Обратите внимание, что для альфы используется 0,0-1,0, а не 0-255.