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

Тема в разделе "Веб-дизайн", создана пользователем Madmess, 20 ноя 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. 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; - это обрезает лишний низ картинки
    но картинка находится поверх рамки

    Как сделать рамку - фон дива - поверх вставляемой картинки?
     
  2. Eihwaz

    Eihwaz

    Регистр.:
    7 окт 2007
    Сообщения:
    156
    Симпатии:
    54
    Не с той стороны зашли:
    Вам нужно либо делать наоборот: картинка фоном, а рамка вставляется в div, либо делать вложенные div'ы и проставлять z-index, чтобы в нижнем div была картинка, а сверху накладывался бы div с рамкой.
     
  3. in7life

    in7life Писатель

    Заблокирован
    Регистр.:
    14 ноя 2009
    Сообщения:
    7
    Симпатии:
    2
    А есть ли смысл от этой рамки? Может средствами css сделать рамку? Будет легче и сайт будет грузится быстрее =)
     
  4. Madmess

    Madmess Создатель

    Регистр.:
    18 ноя 2008
    Сообщения:
    29
    Симпатии:
    0
    А можно более конкретно?
    С примерами кода?
    1 и 2 вариант. В css можно сделать похожую рамку как в дизайне?
    А здесь можно выложить ссылку на дизайн?
    http://emmi.ru/emmi.jpg

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

    Что скажите?
     
  5. in7life

    in7life Писатель

    Заблокирован
    Регистр.:
    14 ноя 2009
    Сообщения:
    7
    Симпатии:
    2
    Хм, я бы конечно либо сразу в фш сделал картинки с рамками, а в ксс такое можно сделать но будет сложно, ибо для начала придется скруглить края у дивов, а то рамка получится квадратной
     
  6. Eihwaz

    Eihwaz

    Регистр.:
    7 окт 2007
    Сообщения:
    156
    Симпатии:
    54
    Ну, можно прописывать прямо в теге тогда:
    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).
     
  7. Madmess

    Madmess Создатель

    Регистр.:
    18 ноя 2008
    Сообщения:
    29
    Симпатии:
    0
    нужна кроссбраузерность =(
    А с двумя дивами как лучше сделать?
    Можно пример?
     
  8. Eihwaz

    Eihwaz

    Регистр.:
    7 окт 2007
    Сообщения:
    156
    Симпатии:
    54
    Че-то я затупил, честно-говоря, сейчас вот другое решение в голову пришло:
    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 — работает.
    Размеры только свои указывайте, понятно.
     
  9. Madmess

    Madmess Создатель

    Регистр.:
    18 ноя 2008
    Сообщения:
    29
    Симпатии:
    0
    Только проблема вот с этой частью
    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>

    Надо только у картинки рамки сделать углы не прозрачные, а цвета фона.
     
  10. Eihwaz

    Eihwaz

    Регистр.:
    7 окт 2007
    Сообщения:
    156
    Симпатии:
    54
    Да, картинка не всегда в одном месте, и что? Картинка заключена в 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>
    
     
Статус темы:
Закрыта.