Как получить фон DIV на нижнем уровне с точной позицией с помощью jQuery и CSS

Я ищу страницу, на которой есть градиент фона, который меняет цвет каждые несколько секунд и смешивается между переходами. Теперь я хочу применить этот эффект к верхним элементам, которые блокируются элементом с твердым фоном.

Чтобы дать вам лучший пример, я имею в виду, что я прикрепил простой макет, и, надеюсь, вы понимаете, что я пытаюсь сделать, я открыт для предложений.

Проблема, очевидно, в блоке, который содержит черный фон, который любой прозрачный PNG использовал бы черный, а не градиент.

Я покажу пример кода:

<body><!-- A Jquery script will be used to add CSS background, Easy stuff -->
<div class="blackbox">
    <div class="logo"><img src="#" alt=""></div>
    <hr class="h-line">
    <div class="v-line"> </div>
</div>

Итак, что мне нужно:

Известный метод jQuery для получения фонового изображения, но он должен иметь возможность ссылаться на положение градиента, поэтому его встроенный фон.
Лучшее решение для этого, пожалуйста, обратите внимание на то, что страница должна быть отзывчивой, поэтому я могу использовать другие методы, но поскольку ее отзывчивость я не могу придумать.

Ответ 1

Поскольку вы запрашиваете альтернативы решениям jQuery

Вы можете немного поиграть с margins и box-shadow и анимацией ключевого кадра.

Что-то в этом направлении для формы (зависит от того, что вы хотите сделать, с какой частью - добавить контент... и каким образом вы хотите, чтобы он был отзывчивым):

HTML:

<div class="wrapper">
    <div class="header"><img src="http://i.imgur.com/CUbOIxr.png" alt="Company name" /></div>
    <div class="content"></div>
</div>

CSS

body {
    background:orange;
    width:100%;
    height:100%;
}
.wrapper {
    width:40%;
    height:90%;
    border:30px solid #000;
    border-right-width:100px;
    border-bottom-width:100px;
}
.header {
    width:100%;
    border-bottom:10px solid transparent;
    -webkit-box-shadow: 0 30px 0 #000;
    -moz-box-shadow: 0 30px 0 #000;
    box-shadow: 0 30px 0 #000;
}
.header img {
    width:100%;
}
.content {
    width:95%;
    height:400px;
    background-color:#000;
    margin-top:30px;
}

DEMO

Таким образом, не требуется javascript. А для фона вы можете использовать линейный градиент и делать все анимации с помощью css переходы или анимации ключевых кадров. Вам также нужно поиграть с длинами и настроить границы и тени в соответствии с вашими потребностями, возможно, добавить некоторые запросы @media для отзывчивости..

Надеюсь, это поможет вам немного в правильном направлении =)

Обновление:

Я надеялся, что изменение градиентов стало меньшей проблемой;-) Глупо мне, извините.

Я разработаю свое предложение только для CSS для анимации, но вы можете выбрать слайдер javascript для фоновой анимации, если вам не нравятся решения CSS3, хотя сейчас это горячий материал; -)

Ok. Итак, я бы добавил несколько неподвижных позиционированных элементов с градиентными фонами (layer1 и layer2).

Теперь у вас есть что-то в этом html:

<div class="layer layer1"></div>
<div class="layer layer2"></div>
<div class="wrapper">
    <div class="header">
        <img src="http://newtpond.com/test/company-name.png" alt="Company name" />
    </div>
    <div class="content"></div>
</div>

и добавьте в них анимацию ключевого кадра в CSS (здесь это только с префиксом поставщика -webkit [вероятно, я ленивый зад]], но я надеюсь, что вы можете получить эту идею, и могут добавить другие):

body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
/* for the animation */
 .layer {
    position:fixed;
    width:100%;
    height:100%;
}
@-webkit-keyframes GoLayer1 {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@-webkit-keyframes GoLayer2 {
    0% {
        opacity:0;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}
.layer1 {
    background: -webkit-linear-gradient(bottom, rgb(43, 70, 94) 29%, rgb(194, 41, 41) 65%, rgb(155, 171, 38) 83%);
    -webkit-animation: GoLayer1 5s infinite;
}
.layer2 {
    background: -webkit-linear-gradient(bottom, rgb(225, 202, 230) 29%, rgb(39, 163, 194) 65%, rgb(36, 124, 171) 83%);
    -webkit-animation: GoLayer2 5s infinite;
}
/* the wrapper shape */
 .wrapper {
    z-index:999;
    opacity:1;
    position:relative;
    width:40%;
    height:90%;
    border:30px solid #000;
    border-right-width:100px;
    border-bottom-width:100px;
}
.header {
    width:100%;
    border-bottom:10px solid transparent;
    -webkit-box-shadow: 0 30px 0 #000;
    -moz-box-shadow: 0 30px 0 #000;
    box-shadow: 0 30px 0 #000;
}
.header img {
    width:100%;
}
.content {
    width:95%;
    height:400px;
    background-color:#000;
    margin-top:28px;
}

DEMO (проверено в Chrome 26 - выглядело cool =)

Теперь я могу указать вам этот подход, основанный только на CSS. Все еще есть возможность изменить и рассмотреть совместимость с браузером. Но это, безусловно, альтернатива... и шаг в направлении, где идут html5 и css3 (если вы хотите быть горячим и крутым;-), хе-хе, жаль, слишком много глупости.

Удачи!

Обновление 2:

Итак, я немного преодолел свою лень и добавил в верхний пример еще несколько префиксов поставщиков (и, конечно же, вы можете использовать любое изображение в качестве фона):

DEMO

И здесь я добавляю еще один пример, который использует png-изображение для градиента и скользит вверх и вниз по фону (как еще одна альтернатива):

DEMO

Ответ 2

Есть много способов сделать это, CSS3 и изображения уже предложены, поэтому я предлагаю использовать холст.

В элементе холста HTML есть все, что вам нужно встроить. Оно позволяет заполнять градиентные фоновые изображения, а globalCompositeOperation, маскирование фигур и текста возможно, создавая вырезы в фоновом режиме, чтобы сделать реальные изменчивые HTML-элементы действительно прозрачными на цветном фоне. Он также хорошо масштабируется и может легко реагировать.

Элемент canvas поддерживается во всех основных браузерах, кроме Internet Explorer 8 и ниже, что означает, что поддержка браузера лучше, чем многие ранее упомянутые выше методы CSS3, такие как ключевые кадры и размер фона.

Используя резервную копию, например, скажем, изображения, которые исчезают и исчезают, если canvas is'nt не доступно, не должно быть очень сложно понять, и во всех других браузерах, кроме Internet Explorer ниже версии 9, никакие изображения не нужны создайте градиентные фоны и текстовые маски в холсте, что значительно ускорит загрузку страницы.

Чтобы определить, поддерживается ли холст или нет, вы можете использовать эту удобную функцию:

function isCanvasSupported(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}

используется так:

if ( isCanvasSupported() ) {
    // do canvas stuff
}else{
    // fall back to images
}

Итак, давайте доберемся! Чтобы создать резерв "последней инстанции" и некоторые элементы, которые мы можем "клонировать" в холст, мы создадим элементы, которые нам нужны в HTML, чтобы получить структуру, немного похожую на то, что вы указали в своем вопросе. Это имеет дополнительное преимущество в том, что вы можете просто изменить некоторые CSS, чтобы также внести изменения в холст:

<div id="gradient">
    <div class="text">COMPANY NAME</div>
    <div class="h_bar"></div>
    <div class="v_bar"></div>
</div>

Это просто контейнер с элементом для текста и по одному для каждого из столбцов.

Некоторое стилирование также необходимо, я сделаю это легко, с позицией absolute и некоторым действительно быстрым позиционированием, поскольку эти элементы не будут видны, если кто-то не отключил javascript:

#gradient {position: absolute; 
           background: #000; 
           top: 5%; left: 5%; right: 5%; bottom: 5%;
          }
.text {position: absolute; 
      top: 20px; 
      left: 100px; 
      width: 400px; 
      color: #fff; font-size: 40px; font-weight: bold;
      font-family: arial, verdana, sans-serif;
      }
.h_bar {position: absolute; 
        height: 20px; 
        top: 100px; left: 60px; right: 60px; 
        background: #fff;
       }
.v_bar {position: absolute; 
        width: 20px; 
        top: 140px; bottom: 30px; right: 60px; 
        background: #fff;
       }

Без javascript, который будет выглядеть как ЭТО FIDDLE, и он должен быть несколько отзывчивым и адаптироваться к размер окна.

Теперь нам нужен javascript, чтобы превратить эти элементы во что-то в холст. Мы создадим два элемента холста, один для фона, так как я решил постоянно анимировать фон между случайными градиентами и один для внутреннего черного ящика и содержимого (текст и строки).

Поскольку маскировка текста и баров может быть немного медленной, нам не нужно перерисовывать все, только фоновое полотно, поскольку передний план довольно статичен. Это также позволяет избежать мерцающей проблемы в некоторых браузерах с высокой частотой кадров, и мы будем использовать requestAnimationFrame для анимации фона, поэтому мерцание в текстовой маске было бы проблемой, если бы мы не использовали два элемента canvas.

Для браузеров, которые не поддерживают requestAnimationFrame, мы добавим этот polyfill, чтобы убедиться, что он работает везде.

Время для написания javascript, это, конечно, использует jQuery:

var gradSite = {
    init: function() {
        var self = this;
        self.create().setSizes().events();
        (function animationloop(){
            requestAnimationFrame(animationloop);
            self.draw().colors.generate();
        })();
    },
    create: function() { // creates the canvas elements
        this.canvas     = document.createElement('canvas');
        this.canvas2    = document.createElement('canvas');
        this.canvas.id  = 'canvas1';
        this.canvas2.id = 'canvas2';
        this.canvas.style.position = 'absolute';
        this.canvas2.style.position = 'absolute';
        $('#gradient').after(this.canvas, this.canvas2);
        return this;
    },
    events: function() { //event handlers
        $(window).on('resize', this.setSizes);
        $('#gradient').on('contentchange', this.draw2);
        return this;
    },
    setSizes: function() { // sets sizes on load and resize
        var self = gradSite,
            w    = $(window),
            m    = $('#gradient');

        self.canvas.height      = w.height();
        self.canvas.width       = w.width();
        self.canvas2.bg         = m.css('background-color');
        self.canvas2.height     = m.height();
        self.canvas2.width      = m.width();
        self.canvas2.style.top  = m.offset().top + 'px';
        self.canvas2.style.left = m.offset().left + 'px';
        self.draw2();
        return self;
    },
    colors: {
        colors: {
                0: [255,255,0],
                1: [255,170,0],
                2: [255,0,0]
        },
        map: {
                0: [0,0,1],
                1: [0,1,1],
                2: [0,1,1]
        },
        generate: function() { // generates the random colors
            var self = this;
            $.each(self.colors, function(i,color) {
                $.each(color, function(j, c) {
                    var r   = Math.random(),
                        r2  = Math.random(),
                        val = self.map[i][j] == 0 ? (c-(j+r)) : (c+(j+r2));

                    if (c > 255) self.map[i][j] = 0;
                    if (c < 0  ) self.map[i][j] = 1;

                    self.colors[i][j] = val;
                });
            });
        }
    },
    raf: (function() { // polyfill for requestAnimationFrame
        var lastTime = 0,
            vendors  = ['webkit', 'moz'];
        for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
            window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
            window.cancelAnimationFrame  = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
        }

        if (!window.requestAnimationFrame)
            window.requestAnimationFrame = function(callback, element) {
                var currTime = new Date().getTime(),
                    timeToCall = Math.max(0, 16 - (currTime - lastTime)),
                    id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
                lastTime = currTime + timeToCall;
                return id;
            };

        if (!window.cancelAnimationFrame)
            window.cancelAnimationFrame = function(id) {
                clearTimeout(id);
            };
    }()),
    calculateColor: function(colors) { // returns a rgb color from the array
        return 'rgb(' + Math.round(colors[0]) + ',' + Math.round(colors[1]) + ',' + Math.round(colors[2]) + ')';
    },
    draw: function() { //draws the color background
        var self = this,
            c    = self.canvas || document.getElementById('canvas1'),
            ctx  = c.getContext('2d'),
            grad = ctx.createLinearGradient(0,0,0,self.canvas.height);

        c.width = c.width;
        grad.addColorStop(0, self.calculateColor(self.colors.colors[0]));
        grad.addColorStop(0.5, self.calculateColor(self.colors.colors[1]));
        grad.addColorStop(1, self.calculateColor(self.colors.colors[2]));
        ctx.fillStyle = grad;
        ctx.fillRect(0,0,self.canvas.width, self.canvas.height);
        return self;
    },
    draw2: function() { // draws the black square and content
        var self = this,
            c    = self.canvas2 || document.getElementById('canvas2'),
            ctx2 = c.getContext('2d'),
            txt  = $('.text', '#gradient').first(),
            hbar = $('.h_bar', '#gradient').first(),
            vbar = $('.v_bar', '#gradient').first();

        c.width = c.width;
        ctx2.globalCompositeOperation = 'xor';

        ctx2.font = txt.css('font');
        ctx2.fillStyle = c.bg || '#000';
        ctx2.fillText(txt.text(), txt.offset().left, txt.offset().top);  

        ctx2.fillRect(hbar.position().left, hbar.position().top, hbar.width(),hbar.height());
        ctx2.fillRect(vbar.position().left, vbar.position().top, vbar.width(),vbar.height());
        ctx2.fillRect(0,0,c.width,c.height);
    }
}

Функция raf будет polyfill для requestAnimationFrame, а две функции рисования создают содержимое в холсте. Это действительно не так сложно.

Мы будем называть вышеупомянутый script внутри готового обработчика DOM, например:

$(function() {
    gradSite.init(); // starts the canvas stuff
});

Добавьте все это в скрипку и добавьте несколько элементов для демонстрационных целей, это будет выглядеть как ЭТО FIDDLE, и здесь законченный →

FULL SCREEN DEMO

Ответ 3

Единственный способ, с помощью которого я могу это увидеть, - это, если ваш черный div не имеет фона и разрезан на разделы, в которых каждый имеет фон. Область названия компании должна иметь тот же цвет переднего плана, что и фон для остальных разделов div. В зависимости от ваших потребностей макета это может быть хорошо.

Например, вы можете разрезать его на три раздела и два изображения:

Ответ 4

Вы можете попробовать комбинировать фоновый размер и фоновое положение с помощью javascript:

setGradientSizes = function (el) {
var width = $(document).width() + 'px', height = $(document).height() + 'px';
$(el || '.gradient:not(body)').each(function () {
    var offset = $(this).offset();
    $(this).css('background-size', width + ' ' + height);
    $(this).css('background-position', (offset.left * -1) + 'px ' + (offset.top * -1) + 'px');
})};

Рабочий пример здесь → jsbin

ПРИМЕЧАНИЯ:

Это не 100% кросс-браузер - фоновый размер поддерживается в FF4.0 +, IE9.0 +, Opera 10.0+, Chrome 1.0+, Safari 3 +.
Для некоторых старых браузеров вы можете попробовать браузерные префиксы (например, -moz-background-size) - мой пример не распространяется на это.
Чтобы уменьшить мерцание загрузки, вы можете сначала применить вычисления, а затем добавить градиент фона

Ответ 5

Вы можете сделать фон изображения черным текстом, а затем установить цвет фона div на rgba(0,0,0,0), сделав его прозрачным.

Ответ 6

Это может быть полезно для вас в соответствии с моим пониманием

Наследуется копирование определенного значения из родителя его дочерним элементам, но нет другого свойства в обратном направлении (что будет включать другой селектор, чтобы решить, какой стиль будет возвращен).

Вам придется вручную изменить изменения стиля:

div { color: green; }

form div { color: red; }

form div div.content { color: green; }

Если у вас есть доступ к разметке, вы можете добавить несколько классов для стиля именно того, что вам нужно:

form div.sub { color: red; }

form div div.content { /* remains green */ }

Изменить: рабочая группа CSS подходит к чему-то:

div.content {
  all: default;
}

Ответ 7

Если бы я был вами, я буду дублировать css и jQuery, напечатайте его на div поверх того, что когда-либо, и сделайте переполнение скрытым (например, маскирующие слои, но с z-index).