Когда я нахожу свой фоновый рисунок, я хочу, чтобы еще один отображался, но сохранял фоновый. В принципе, я хочу, чтобы стрелка появлялась над парившимся изображением, но это то, что я получаю: (см. Битлую ссылку ниже). Это то, что он должен выглядеть следующим образом: http://i44.tinypic.com/2vnm7au.jpgНаведите изображение, но сохраните фоновое изображение
http://bit.ly/18F2Cqd
Любые предложения?
У вас есть ошибки в CSS.
Во-первых, фоновое изображение находится на другом URL-адресе, чем у вас. И у вас было background-image, где вы должны были написать background, сокращенное имущество.
После исправления этих ошибок я увидел, что фоновое изображение было отображено на 2 пикселя ниже исходного, поэтому мне пришлось слегка изменить положение фона, чтобы стрелка отображалась в том же месте.
background: url("http://oi44.tinypic.com/2vnm7au.jpg") 0 -2px no-repeat;
Исправленная скрипку: http://jsfiddle.net/MrLister/vR7st/3/
Большое вам спасибо. Я пробовал так много способов, что я допустил эти ошибки. Очень ценю вашу помощь. – user2695684
Я понимаю, что вы хотите наложить изображение поверх фона; и что наложенное изображение всегда будет одинаковым.
В этом случае CSS будет:
.test {
position: absolute;
top: 8px;
left: 20px;
background: url("base.jpg");
width: 250px;
height: 200px;
}
.test:hover:after {
content: '';
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background: url("overlay.png");
background-repeat: no-repeat;
}
Файл наложения должны иметь прозрачную область, так что базовый фон можно увидеть.
в CSS3, вы можете добавить несколько Б.Г. изображений. – Era
Быстрое решение, сделайте изображение в два раза больше. Верхняя половина места оригинальное изображение, нижняя половина место конечный результат. Сделайте div равным половине высоты созданного изображения и измените направление движения фона. –
@RohanSood Но я хочу, чтобы этот эффект наведения влиял на все изображения, загружаемые в определенную галерею, например. – user2695684