Как мне объединить фоновое изображение и CSS3 градиент на одном элементе? - PullRequest
Новая
       123

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

1157 голосов
/ 24 марта 2010

Как использовать CSS3-градиенты для моего background-color, а затем применить background-image для применения какой-либо светлой прозрачной текстуры?

Ответы [ 16 ]

0 голосов
/ 16 марта 2018

Если вы хотите, чтобы изображения были полностью слиты друг с другом, когда не похоже, что элементы загружаются отдельно из-за отдельных HTTP-запросов, используйте эту технику. Здесь мы загружаем две вещи в один и тот же элемент, которые загружаются одновременно ... Просто убедитесь, что вы сначала конвертировали предварительно отрендеренное 32-битное прозрачное изображение / текстуру png в строку base64 и используете его в вызове background-image css. Я использовал эту технику, чтобы соединить вафельную текстуру со стандартным правилом прозрачности / линейного градиента CSS. Работает лучше, чем наложение нескольких изображений и тратит впустую HTTP-запросы, что плохо для мобильных устройств. 

 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");
 }
0 голосов
/ 18 июня 2015

Для моего адаптивного дизайна моя стрелка вниз в выпадающем списке справа от окна (вертикальная гармошка) принимала процент в качестве позиции. Первоначально стрелка вниз была «позиция: абсолютная; вправо: 13px;». При позиционировании 97% он работал как шарм следующим образом: 

> 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 );

P.S. Извините, не знаю, как обращаться с фильтрами.

0 голосов
/ 04 апреля 2014

Я хотел сделать кнопку пролета с фоновым изображением, комбинацию градиента фона.

http://enjoycss.com/ помогли выполнить мою рабочую задачу. Только я должен удалить некоторые автоматически сгенерированные дополнительные CSS. Но это действительно хороший сайт, создающий свою работу. 

#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;
}
0 голосов
/ 24 апреля 2013

Если вам нужно, чтобы градиенты и фоновые изображения работали вместе в IE 9 (HTML 5 и HTML 4.01 Strict), добавьте следующую декларацию атрибута в ваш класс css, и это должно сработать: 

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000000', endColorstr='#ff00ff'), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[IMAGE_URL]', sizingMethod='crop');

Обратите внимание, что вы используете атрибут filter и что существует два экземпляра progid:[val], разделенных запятой, прежде чем закрывать значение атрибута точкой с запятой. Вот скрипка . Также обратите внимание, что когда вы смотрите на скрипку, градиент выходит за закругленные углы. У меня нет решения для этого другого, не используя закругленные углы. Также обратите внимание, что при использовании относительного пути в атрибуте src [IMAGE_URL] путь указывается относительно страницы документа, а не файла css (см. source ).

Эта статья (http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/) - вот что привело меня к этому решению. Это очень полезно для CSS3, специфичного для IE.

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

Как верный способ, вы можете просто сделать фоновое изображение, скажем, 500x5 пикселей, при вашем css использовании: 

background-img:url(bg.jpg) fixed repeat-x;
background:#<xxxxxx>;

Где xxxxxx соответствует цвету, который соответствует окончательному цвету градиента.

Вы также можете исправить это в нижней части экрана, чтобы он соответствовал исходному цвету градиента.

0 голосов
/ 05 мая 2011

Я решаю проблему таким образом. Я определяю градиент в HTML и фоновое изображение в теле 

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%
}
Страница:
...