как мне объединить фоновое изображение и css3 градиент на одном элементе?

<p>как использовать css3-градиенты для моего <code>background-color</code>, а затем применить <code>background-image</code>, чтобы применить какую-то легкую прозрачную текстуру?</p>

<p>несколько фонов!</p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>body { background: #eb01a5; background-image: url("image\_url"); /* fallback */ background-image: url("image\_url"), linear-gradient(#eb01a5, #d13531); /* w3c */ }</code></pre></div> </div><p>эти 2 строки являются запасными для любого браузера, который не делает градиенты. см. примечания только для укладки изображений ie <9 ниже.</p><ul> <li>линия 1 устанавливает плоский цвет фона.</li> <li>строка 2 устанавливает запасной вариант фонового изображения.</li> </ul><p>последняя строка устанавливает фоновое изображение и градиент для браузеров, которые могут их обрабатывать.</p><ul> <li>строка 3 предназначена для всех относительно современных браузеров.</li> </ul><p>почти все современные браузеры поддерживают несколько фоновых изображений и css-фонов. смотрите <a href="http://caniuse.com/#feat=css-gradients">http://caniuse.com/#feat=css-gradients</a> для поддержки браузера. хороший пост о том, почему вам не нужны несколько префиксов браузера, см. <a href="http://codepen.io/thebabydino/full/pjxvwp/">http://codepen.io/thebabydino/full/pjxvwp/</a> .</p><p><strong> стек слоев </strong></p><p>следует отметить, что первое определенное изображение будет самым верхним в стеке. в этом случае изображение находится на вершине градиента.</p><p>для получения дополнительной информации о фоновом наложении см. <a href="http://www.w3.org/tr/css3-background/#layering">http://www.w3.org/tr/css3-background/#layering</a> .</p><p><strong> только для наложения изображений (в декларации нет градиентов) для ie <9 </strong></p><p>ie9 и выше могут складывать изображения таким же образом. вы можете использовать это для создания градиентного изображения для ie9, хотя лично я бы не стал. однако следует отметить, что при использовании только изображений, т. е. <9 будет игнорировать резервный оператор и не будет отображать никаких изображений. это не происходит, когда градиент включен. чтобы использовать одно резервное изображение в этом случае, я предлагаю использовать замечательный <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">условный html-элемент пола айриша</a> вместе с вашим резервным кодом:</p><pre class="lang-css prettyprint-override"><code>.lte9 #target{ background-image: url("image\_url"); } </code></pre><p><strong> положение фона, размер и т.д. </strong></p><p>другие свойства, которые будут применяться к одному изображению, также могут быть разделены запятыми. если указано только 1 значение, оно будет применено ко всем сложенным изображениям, включая градиент. <code>background-size: 40px;</code> ограничит как изображение, так и градиент до 40px высоты и ширины. однако использование <code>background-size: 40px, cover;</code> сделает изображение 40px, а градиент покроет элемент. чтобы применить настройку только к одному изображению, установите значение по умолчанию для другого: <code>background-position: 50%, 0 0;</code> или для <a href="http://caniuse.com/#feat=css-initial-value">браузеров, которые его поддерживают</a> , используйте <code>initial</code>: <code>background-position: 50%, initial;</code></p><p>вы также можете использовать сокращение фона, однако это удаляет запасной цвет и изображение.</p><pre class="lang-css prettyprint-override"><code>body{ background: url("image\_url") no-repeat left top, linear-gradient(#eb01a5, #d13531); } </code></pre><p>то же самое относится к background-position, background-repeat и т.д.</p>

<p>если вы также хотите установить <strong><em> положение фона </em></strong> для своего изображения, то вы можете использовать это:</p><pre class="lang-css prettyprint-override"><code>background-color: #444; // fallback background: url('path-to-img') center center no-repeat; // fallback background: url('path-to-img') center center no-repeat, -moz-linear-gradient(top, @startcolor, @endcolor); // ff 3.6+ background: url('path-to-img') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(@startcolor), to(@endcolor)); // safari 4+, chrome 2+ background: url('path-to-img') center center no-repeat, -webkit-linear-gradient(top, @startcolor, @endcolor); // safari 5.1+, chrome 10+ background: url('path-to-img') center center no-repeat, -o-linear-gradient(top, @startcolor, @endcolor); // opera 11.10 background: url('path-to-img') center center no-repeat, linear-gradient(to bottom, @startcolor, @endcolor); // standard, ie10 </code></pre><p>или вы также можете создать less mixin (стиль начальной загрузки):</p><pre class="lang-css prettyprint-override"><code>#gradient { .vertical-with-image(@startcolor: #555, @endcolor: #333, @image) { background-color: mix(@startcolor, @endcolor, 60%); // fallback background-image: @image; // fallback background: @image, -moz-linear-gradient(top, @startcolor, @endcolor); // ff 3.6+ background: @image, -webkit-gradient(linear, 0 0, 0 100%, from(@startcolor), to(@endcolor)); // safari 4+, chrome 2+ background: @image, -webkit-linear-gradient(top, @startcolor, @endcolor); // safari 5.1+, chrome 10+ background: @image, -o-linear-gradient(top, @startcolor, @endcolor); // opera 11.10 background: @image, linear-gradient(to bottom, @startcolor, @endcolor); // standard, ie10 } } </code></pre>

<p>необходимо понять, что первое определенное фоновое изображение является самым верхним в стеке. последнее определенное изображение будет самым нижним. это означает, что для создания градиента фона позади изображения вам потребуется:</p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code> body { background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow); background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow)); background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow); }</code></pre></div> </div><p>вы также можете определить положение фона и размер фона для изображений. я собрал сообщение в блоге о некоторых интересных вещах, которые вы можете сделать с помощью <a href="http://css3wizardry.com/2010/08/19/css3-gradients-and-patterns/">css3 градиенты</a> </p>

<p>вы можете просто напечатать:</p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>background: linear-gradient( to bottom, rgba(0,0,0, 0), rgba(0,0,0, 100) ),url(../images/image.jpg);</code></pre></div> </div>

<p>мое решение:</p><pre><code>background-image: url(image\_url); /* fallback */ background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(image\_url); </code></pre>

<p>я всегда использую следующий код, чтобы он работал. есть несколько заметок:</p><ol> <li>если вы поместите url изображения перед градиентом, это изображение будет отображаться <strong> над </strong> градиентом, как и ожидалось.</li> </ol><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.background-gradient { background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%); background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%); background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%); background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%); background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%); background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, linear-gradient(135deg, #6ec575 0, #3b8686 100%); height: 500px; width: 500px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="background-gradient"></div></code></pre></div> </div><ol start="2"> <li>если поместить градиент перед url-адресом изображения, это изображение будет отображаться <strong> под </strong> градиентом.</li> </ol><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.background-gradient { background: -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat; background: -webkit-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat; background: -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat; background: -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat; background: -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat; background: linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat; width: 500px; height: 500px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="background-gradient"></div></code></pre></div> </div><p>этот метод такой же, как у нас есть несколько фоновых изображений, как описано <a href="http://www.w3schools.com/css/css3\_backgrounds.asp">здесь</a> </p>

<p>у меня была реализация, в которой мне нужно было продвинуть эту технику на шаг дальше, и я хотел изложить свою работу. приведенный ниже код делает то же самое, но использует sass, bourbon и изображение sprite.</p><pre><code> @mixin sprite($position){ @include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2)); } a.button-1{ @include sprite(0 0); } a.button-2{ @include sprite (0 -20px); } a.button-2{ @include sprite (0 -40px); } </code></pre><p>sass и bourbon заботятся о кросс-браузерном коде, и теперь все, что я должен объявить, это позиция спрайта на кнопку. этот принцип легко продлить для кнопок "активный" и "наведение".</p>

<p>вот mixin, который я создал для обработки всего, что люди хотели бы использовать:</p><pre><code>.background-gradient-and-image (@fallback, @imgurl, @background-position-x, @background-position-y, @startcolor, @endcolor) { background: @fallback; background: url(@imgurl) @background-position-x @background-position-y no-repeat; /* fallback */ background: url(@imgurl) @background-position-x @background-position-y no-repeat, -webkit-gradient(linear, left top, left bottom, from(@startcolor) @background-position-x @background-position-y no-repeat, to(@endcolor)); /* saf4+, chrome */ background: url(@imgurl) @background-position-x @background-position-y no-repeat, -webkit-linear-gradient(top, @startcolor, @endcolor); /* chrome 10+, saf5.1+ */ background: url(@imgurl) @background-position-x @background-position-y no-repeat, -moz-linear-gradient(top, @startcolor, @endcolor); /* ff3.6+ */ background: url(@imgurl) @background-position-x @background-position-y no-repeat, -ms-linear-gradient(top, @startcolor, @endcolor); /* ie10 */ background: url(@imgurl) @background-position-x @background-position-y no-repeat, -o-linear-gradient(top, @startcolor, @endcolor); /* opera 11.10+ */ background: url(@imgurl) @background-position-x @background-position-y no-repeat, linear-gradient(top, @startcolor, @endcolor); /* w3c */ } </code></pre><p>это можно использовать так:</p><pre><code>.background-gradient-and-image (#f3f3f3, "../images/backgrounds/community-background.jpg", left, top, #fafcfd, #f2f2f2); </code></pre><p>надеюсь, вы, ребята, найдете это полезным.</p><p>спасибо @gidgidonihah за нахождение первоначального решения.</p>

<p>если у вас возникают странные ошибки при загрузке фоновых изображений, используйте средство проверки ссылок w3c: <a href="https://validator.w3.org/checklink">https://validator.w3.org/checklink</a> </p><p>вот современные миксины, которые я использую (кредиты: <a href="http://codepen.io/thebabydino/full/pjxvwp/">psa: не используйте генераторы градиента</a> ):</p><pre><code>.buttonakc { .gradientbackground(@imagename: 'accept.png'); background-repeat: no-repeat !important; background-position: center right, top left !important; } .buttonakc:hover { .gradientbackgroundhover('accept.png'); } .gradientbackground(@startcolor: #fdfdfd, @endcolor: #d9d9db, @imagename) { background-color: mix(@startcolor, @endcolor, 60%); // fallback background-image: url("@{img-folder}/@{imagename}?v=@{version}"); // fallback background: url("@{img-folder}/@{imagename}?v=@{version}") no-repeat scroll right center, -webkit-linear-gradient(top, @startcolor 0%, @endcolor 100%) no-repeat scroll left top; // chrome 10-25, safari 5.1-6 background: url("@{img-folder}/@{imagename}?v=@{version}") no-repeat scroll right center, linear-gradient(to bottom, @startcolor 0%, @endcolor 100%) no-repeat scroll left top; } .gradientbackgroundhover(@imagename) { .gradientbackground(#fdfdfd, #b5b6b9, @imagename); } </code></pre>

<p>я пытался сделать то же самое. в то время как background-color и background-image существуют на отдельных слоях внутри объекта - то есть они могут сосуществовать - css-градиенты, кажется, кооптируют слой background-image.</p><p>насколько я могу судить, у border-image более широкая поддержка, чем у нескольких фонов, так что, возможно, это альтернативный подход.</p><p> <a href="http://articles.sitepoint.com/article/css3-border-images">http://articles.sitepoint.com/article/css3-border-images</a> </p><p>обновление: немного больше исследований. кажется, у петры грегоровой что-то здесь работает -> <a href="http://petragregorova.com/demos/css-gradient-and-bg-image-final.html">http://petragregorova.com/demos/css-gradient-and-bg-image-final.html</a> </p>

<p>если вы хотите, чтобы изображения были полностью слиты воедино, когда они не выглядят как элементы, загружаемые отдельно из-за отдельных http-запросов, используйте эту технику. здесь мы загружаем две вещи в один и тот же элемент, которые загружаются одновременно ... просто убедитесь, что вы сначала конвертировали предварительно отрендеренное 32-битное прозрачное изображение/текстуру png в строку base64 и используете его в вызове background-image css. я использовал эту технику, чтобы объединить вафельную текстуру со стандартным правилом прозрачности/линейного градиента css. работает лучше, чем наложение нескольких изображений и тратит впустую http-запросы, что плохо для мобильных устройств.</p><pre><code> div.imgdiv { background: linear-gradient(to right bottom, white, rgba(255,255,255,0.95), rgba(255,255,255,0.95), rgba(255,255,255,0.9), rgba(255,255,255,0.9), rgba(255,255,255,0.85), rgba(255,255,255,0.8) ); background-image: url("data:image/png;base64,insertimageblobhere"); } </code></pre>

<p>если вам нужно, чтобы градиенты и фоновые изображения работали вместе в ie 9 (html 5 и html 4.01 strict), добавьте следующую декларацию атрибута в ваш класс css, и она должна сделать свое дело:</p><pre><code>filter: progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr='#000000', endcolorstr='#ff00ff'), progid:dximagetransform.microsoft.alphaimageloader(src='[image\_url]', sizingmethod='crop'); </code></pre><p>обратите внимание, что вы используете атрибут <code>filter</code> и есть два экземпляра <code>progid:[val]</code>, разделенных запятой, перед тем как закрыть значение атрибута точкой с запятой. вот <a href="http://jsfiddle.net/ksevksev/sebxy/">скрипка</a> . также обратите внимание, что когда вы смотрите на скрипку, градиент выходит за закругленные углы. у меня нет решения для этого другого, не используя закругленные углы. также обратите внимание, что при использовании относительного пути в атрибуте src [image\_url] путь указывается относительно страницы документа, а не файла css (см. <a href="http://www.netvivs.com/how-to-fix-images-and-css-relative-path-in-alphaimageloader/">источник</a> ).</p><p>эта статья ( <a href="http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/">http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/</a> ) привела меня к этому решению. это довольно полезно для ie3-специфичного css3.</p>

<p>я хотел сделать кнопку пролета с фоновым изображением, комбинацию градиента фона.</p><p> <a href="http://enjoycss.com/">http://enjoycss.com/</a> помог выполнить мою работу. только я должен удалить некоторые автоматически сгенерированные дополнительные css. но это действительно хороший сайт, создающий свою работу.</p><pre><code>#nav a.link-style span { background: url("../images/order-now-mobile.png"), -webkit-linear-gradient(0deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%); background: url("../images/order-now-mobile.png"), -moz-linear-gradient(90deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%); background: url("../images/order-now-mobile.png"), linear-gradient(90deg, rgba(170,31,0,1) 0, rgba(214,18,26,1) 51%, rgba(170,31,0,1) 100%); background-repeat: no-repeat; background-position: 50% 50%; border-radius: 8px; border: 3px solid #b30a11; } </code></pre>

<p>я решаю проблему таким образом. я определяю градиент в html и фоновое изображение в теле</p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>html { background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0.31, rgb(227, 227, 227)), color-stop(0.66, rgb(199, 199, 199)), color-stop(0.83, rgb(184, 184, 184))); background-image: -moz-linear-gradient(left bottom, rgb(227, 227, 227) 31%, rgb(199, 199, 199) 66%, rgb(184, 184, 184) 83%); height: 100% } body { background: url("http://www.skrenta.com/images/stackoverflow.jpg"); height: 100% }</code></pre></div> </div>

<p>для моего адаптивного дизайна моя стрелка вниз в выпадающем списке справа от окна (вертикальная гармошка) принимала процент в качестве позиции. первоначально стрелка вниз была "позиция: абсолютная; вправо: 13px;". с позиционированием 97% он работал как шарм следующим образом:<br> <br></p><pre><code>> background: #ffffff; > background-image: url(path-to-arrow\_down.png); /*fall back - ie */ > background-position: 97% center; /*fall back - ie */ > background-repeat: no-repeat; /*fall back - ie */ > background-image: url(path-to-arrow\_down.png) no-repeat 97% center; > background: url(path-to-arrow\_down.png) no-repeat 97% center, -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); > background: url(path-to-arrow\_down.png) no-repeat 97% center, -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); > background: url(path-to-arrow\_down.png) no-repeat 97% center, -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); > background: url(path-to-arrow\_down.png) no-repeat 97% center, -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);<br /> > filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#ffffff', endcolorstr='#eaeaea',gradienttype=0 ); </code></pre><p>постскриптум извините, не знаю, как обращаться с фильтрами.</p>