Фон div'a поверх картинки

Статус
В этой теме нельзя размещать новые ответы.
Madmess

Madmess

Создатель
Регистрация
18 Ноя 2008
Сообщения
29
Реакции
0
Есть div, описынный в css
.border {
background: url(pics/pic_top.png) no-repeat;
height: 126px;
width: 121px;
margin: 6px;
overflow: hidden;
float: left;
}

pic_top.png - это рамка, которая должна быть поверх картинки, которую будут вставлять в сам div
Т.е. есть div 126*121px
В него вставляется картинка 120*ХХХ

Типа

<div class="border">
<img src="pic.jpg" height="120px" width="140px" alt="" />
</div>

overflow: hidden; - это обрезает лишний низ картинки
но картинка находится поверх рамки

Как сделать рамку - фон дива - поверх вставляемой картинки?
 
Не с той стороны зашли:
Вам нужно либо делать наоборот: картинка фоном, а рамка вставляется в div, либо делать вложенные div'ы и проставлять z-index, чтобы в нижнем div была картинка, а сверху накладывался бы div с рамкой.
 
  • Заблокирован
  • #3
А есть ли смысл от этой рамки? Может средствами css сделать рамку? Будет легче и сайт будет грузится быстрее =)
 
А можно более конкретно?
С примерами кода?
1 и 2 вариант. В css можно сделать похожую рамку как в дизайне?
А здесь можно выложить ссылку на дизайн?
Для просмотра ссылки Войди или Зарегистрируйся

Рамочка нужна поверх последних комплектов.
Сделать наоборот - картинку в фон div, а рамку сверху наверно не получится, т.к. адрес картинки всегда разный и в css его не вставить, он функцией на php из БД берется.
Если только фон прописывать не в css, а на самой странице.

Что скажите?
 
  • Заблокирован
  • #5
Хм, я бы конечно либо сразу в фш сделал картинки с рамками, а в ксс такое можно сделать но будет сложно, ибо для начала придется скруглить края у дивов, а то рамка получится квадратной
 
Madmess написал(а):
адрес картинки всегда разный и в css его не вставить, он функцией на php из БД берется.
Нажмите для раскрытия...
Ну, можно прописывать прямо в теге тогда:
HTML: 
<div class="thumbnail" style="background-image: url('path/to/picture.jpg')">
А в css укажите нужные для фона стили (no-repeat-ы, например).
Хотя в общем, я бы предпочел решение с двумя накладывающимися div'ами.
По поводу рамки:
HTML: 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
border-radius: 5px;
Но работать будет не под всеми браузерами. (Firefox, Safari, Chrome).
 
нужна кроссбраузерность =(
А с двумя дивами как лучше сделать?
Можно пример?
 
Че-то я затупил, честно-говоря, сейчас вот другое решение в голову пришло:
HTML: 
<head>
    <style type="text/css">
	* {
	    padding: 0;
	    margin: 0;
	}
        .thumbnail {
            position: relative;
            width: 320px;
	    height: 200px;
        }
        .thumbnail img {
            border: 0px;
        }
	.thumbnail span {
            position: absolute;
	    top: 0;
	    left: 0;
	    width: 320px;
	    height: 200px;
	    background: url('frame.png') no-repeat top left;
	}
    </style>
</head>
<body>
    <div class="thumbnail">
	<img src="picture.jpg" />
	<span></span>
    </div>
</body>
Проверил в Firefox 3.5, Chrome, IE6 — работает.
Размеры только свои указывайте, понятно.
 
Только проблема вот с этой частью
position: absolute;
top: 0;
left: 0;

Грубо говоря надо рамку надвинуть поверх картинки с помощью смещения.
Но картинка не всегда в одном месте ведь. Координаты у нее разные.
И картинки размеров разных. Ширина одинаковая всегда - 120px
А высота разная и если она больше 126px, надо чтоб обрезалось

Добавлено через 5 минут
Во! вроде бы получилось 2мя дивами
Сделал так:
в css
.thumbnail {
width: 121px;
height: 126px;
margin: 6px;
overflow: hidden;
float: left;
}

.border {
width: 121px;
height: 126px;
float: left;
background: url(pics/pic_top.png) no-repeat;
}

на странице
<div class="thumbnail" style="background: url('http://emmi.ru/img/goods/508.jpg')">
<div class="border"></div>
</div>

Надо только у картинки рамки сделать углы не прозрачные, а цвета фона.
 
Madmess написал(а):
Только проблема вот с этой частью
position: absolute;
top: 0;
left: 0;
Грубо говоря надо рамку надвинуть поверх картинки с помощью смещения.
Но картинка не всегда в одном месте ведь. Координаты у нее разные.
Нажмите для раскрытия...
Да, картинка не всегда в одном месте, и что? Картинка заключена в div, в котором кроме нее есть span с рамкой, и который находится в положении top: 0, left: 0 относительно родительского div'a.
HTML: 
<head>
    <style type="text/css">
		* {
		    padding: 0;
		    margin: 0;
		}
		#wrapper {
		    text-align: center;
		}
		#page {
		    position: relative;
		    width: 90%;
		    margin: 0 auto;
		    text-align: left;
		}
		#header, #content, #thumbnails_wrapper, #footer_text {
		    width: 100%;
		}
		#thumbnails_wrapper {
		    background: #7C0000;
		}
		#header {
		    background: #D4D0D0;
		}
		#content {
		    background: #fff;
		}
		#footer_text {
		    background: #5B0101;
		}
		.thumbnail {
		    position: relative;
		    float: left;
		    width: 320px;
		    height: 200px;
		}
                .thumbnail img {
                    border: 0px;
                }
		.thumbnail span {
		    position: absolute;
		    left: 0px;
		    top: 0px;
		    width: 320px;
		    height: 200px;
		    background: url('frame.png') no-repeat top left;
		}
		hr.clear_both {
		    clear: both; 
		    display: none;
		}
    </style>
</head>
<body>
	<div id="wrapper">
		<div id="page">
			<div id="header">
				Шапка
			</div>
			<div id="content">
				Много текста
			</div>
			<div id="thumbnails_wrapper">
				<div class="thumbnail">
					<img src="picture.jpg" />
					<span></span>
				</div>
				<div class="thumbnail">
					<img src="picture.jpg" />
					<span></span>
				</div>
				<div class="thumbnail">
					<img src="picture.jpg" />
					<span></span>
				</div>
				<div class="thumbnail">
					<img src="picture.jpg" />
					<span></span>
				</div>
				<hr class="clear_both">
			</div>
			<div id="footer_text">
				Подвал, много текста
			</div>
		</div>
	</div>
</body>
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху