Можно изменить или изменить только цвет фона элемента?

У меня есть div с правилом css, которое имеет background-color. Удивление, если можно просто изменить положение или размер цвет фона (ничего не в div элемента? Если да, то может кто-нибудь помочь мне сделать это?Можно изменить или изменить только цвет фона элемента?

HTML Структура

<div class="col-6 no-padding blue-box-0 blue-box-b blue-box-right"> 
<img src="/media/2680859/meet-plannerresources.jpg" alt=""> 
<h3>Professional Planner Resources</h3> 
<p>Our award-winning Convention Services team is eager to assist you in your planning efforts from beginning to end.</p> 
<h4>Meeting Planners</h4> 
<a href="/meet/planning-tools/" class="red-arrow"></a> 
<a class="bluehitbox" href="/meet/planning-tools/"></a> 
</div>

It отображает коробку, подобную модели, все, что я хочу сделать, это изменить размер фона или позицию (верхняя позиция, я полагаю, если у родителя есть overflow:hidden, это может сработать), и опустите его вниз в элемент div, чтобы он составлял около 70 пикселей в высоту. Можно ли это сделать в CSS или даже jQuery?

Приведенное ниже изображение как фоновый цвет (который является значением rgba синего на изображении) должен масштабироваться или располагаться до высоты 70 пикселей от нижней части окна. В любом случае, возможно ли это сделать на мышечном поле?

Need Image to drop down

Спасибо.

источник

2014-04-10 Solomon Closson

Не могли бы вы создать jsfiddle? пожалуйста? – hjpotter92

Я не понимаю точно, что вы хотите, но фоновая позиция предназначена только для изображений. Что вы можете сделать, это «переместить его», добавив границу или маржу. –

Проблема заключается в 'z-index', поэтому, если я применил к нему jQuery, то при наведении указатель будет скользить вниз и вверх, потому что я больше не над элементом с цветом фона ... однако, если он установлен как у меня есть, я всегда буду над этим элементом, потому что это родительский элемент 'blue-box-0' –

Вы можете ввести еще один DIV внутри этого DIV со следующими свойствами CSS набор:

.className{ position: absolute; z-index: -1; }

position: absolute бы удалить этот DIV из нормального потока, а следующие элементы было бы под ним. Здесь отображается z-index, установите его на -1 или значение меньше, чем значение других элементов на его месте. Это заставит другие элементы отображать поверх вашего div.

проверить это jsfiddle для справки

источник

2014-04-10 19:33:49 Varun

Проблема заключается в 'z-index', поэтому, если я применил jQuery к нему, при наведении курсора он будет скользить вниз и вверх, пока моя мышка все еще находится на элементе, потому что я больше не над элементом с цветом фона. .. однако, если он настроен, как у меня, я всегда буду над этим элементом, потому что это родительский элемент 'blue-box-0' –

В вашем определении': hover' убедитесь, что у вас есть 'z-index 'set. – Varun

Спасибо, пришлось играть со значениями 'z-index', но с помощью этого подхода. Cheers :) –

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

Чтобы переместить его вверх или вниз, вы можете использовать margin-top, чтобы переместить div «вниз» и, следовательно, цвет фона.

источник

2014-04-10 18:56:31

Я могу переместить div только как раз, проблема теперь в том, как удержать ее, когда моя мышь больше не над элементом с «фоном-цветом»? Предположим, мне понадобится несколько селекторов для события 'hover'? –

Можно изменить или изменить только цвет фона элемента?

ответ

Смежные вопросы