Я хочу добавить цвет фона только к части моего div - программирование
Подтвердить что ты не робот

Я хочу добавить цвет фона только к части моего div

У меня есть java-плагин, который устанавливает меню слева, а затем результирующие динамические данные справа. Когда вы нажимаете элемент меню, соответствующие данные справа прокручиваются вверх. Данные справа представляют собой длинный список, когда вы нажимаете на элемент меню, который вы просто не видите только один (единственный) результат, он просто выводит его вверху страницы, а остальные находятся ниже него.

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

div - это то, что движется, поэтому я устанавливаю цвет в верхний процент страницы с помощью linear-gradient в CSS3, но он удаляется, когда вы нажимаете другой пункт меню, так как div сдвигается вверх. У меня есть анимация CSS3, но, поскольку IE, к сожалению, все еще существует, мне нужно что-то для совместимости с браузером и для старых браузеров. Единственное, что я нашел, - это градиенты CSS3, которые мне не нужны: мне не нужен градиент, мне нужен блок цвета без создания другого div, потому что, как я уже сказал, данные динамичны, и это не всегда одно и то же в что div.

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

4b9b3361

Ответ 1

Градиенты НЕ обязательно имеют затухание, это неправильное представление, скажем, что вы хотите, чтобы ваш div был на 70% красным (сплошным), начиная с вершины, ваш CSS будет.

background-image: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%)

Два метода:

С градиентами:

div{    
    width:200px;
    height:200px;
    margin:50px auto;
    border:4px solid rgb(50,50,50);
    background-image: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%);
    background-image: -webkit-linear-gradient(top, red, red 70%, transparent 70%, transparent 100%)  
}

Fiddle → http://jsfiddle.net/QjqYt/

Без градиентов

div{
    position:relative;
    z-index:1;
    width:200px;
    height:200px;
    margin:50px auto;
    border:4px solid rgb(50,50,50);  
}

div:before{
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:100%;
    height:70%;
    content:"";
    background-color:red;
}

Fiddle → http://jsfiddle.net/6cKZL/1/

Ответ 2

Rodney - Вы можете использовать Colorzilla, чтобы создать свой собственный градиент. Вы можете сделать любой градиент с помощью онлайн-инструмента, и он дает вам код CSS. Он также имеет возможность сделать его совместимым с IE.

Примечание. Если кто-то сочтет это "комментарий-иш" - я могу его переместить.

Ответ 3

В качестве обновления к принятому ответу:

.only-start{
  background: linear-gradient(
    to right,
    red,
    red 1rem,
    transparent 1rem,
    transparent 100%
  );
}