Наложение одной картинки поверх другой
Подскажите как сделать картинку поверх одной большего размера картинку меньшего размера
мне надо что бы картинки обе были резиновые и уменьшались вместе с окном браузера
я делал так в HTML прописывал
body id="ident">/body>
1 2 3 4 5 6 7 8
#ident { background-attachment: fixed; background-image: url(/internet-seminar/callme/bg_2.png); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%, auto auto; font-family: 'Tinos',serif; }
картинка растягивается и уменьшается по размеру браузера
но вторую картинку с этими параметрами в CSS не могу наложить поверх первой
вторая картинка с парамерами в CSS нужно сделать такими
1 2 3 4 5 6 7 8
#ident { background-attachment: fixed; background-image: url(/internet-seminar/callme/bg_3.png); background-position: left 20 top 50; background-repeat: no-repeat; background-size: 50% 50%, auto auto; font-family: 'Tinos',serif; }
Подскажите ?
Заранее благодарю !
Добавлено через 9 минут
Мне надо что бы маленькая картинка была всегда в одном месте большой и не смещалась относительно большой и уменьшалась в разных разрешениях браузера
Как наложить одну картинку на другую средствами html?
Здравствуйте! Подскажите как наложить одну картинку на другую средствами html? Например есть шапка (heder) сайта. В определенном месте надо наложит к примеру flash логотип или картинку с прозрачностью (например в png).. Рыл инет ничего путевого, либо криво отображается либо еще что то. Спасибо. P.S. Желательно конкретно объяснить.
Статьи о Форекс. Психологические аспекты.. (http://botagovo.ru/)
29 января 2011, 08:40
Это делается средствами css Смотрите в сторону position:absolute .
29 января 2011, 08:42
dandandan:
Смотрите в сторону position:absolute
На сайте с 18.01.2011
29 января 2011, 08:46
dandandan:
Это делается средствами css Смотрите в сторону position:absolute .
Можно на реальном примере? Например главная картинка header.jpg, а то что наложить logo.swf или logo.png. Что нужно в стилях приписать?
На сайте с 22.08.2007
29 января 2011, 09:06
29 января 2011, 09:08
Наложение фона на картинку с помощью CSS
Как наложить фон на картинку с помощью CSS? Часто на главной странице сайта или ленинг-пейдж размещают картинку на всю ширину и высоту экрана, а сверху добавляют затемняющий фон, поверх которого в дальнейшем располагается заголовок. Давайте добавим не обычный заголовок, а поздравление с наступающим Новым 2019 годом! ��
Далее в примере я использую картинки с сайта http://lorempixel.com/, чтобы вы могли посмотреть результат в песочнице. Картинки генерируются автоматически, поэтому при каждом изменении кода, будет показываться новая картинка.
Добавим в html-файл следующий код:
С наступающим
Новым 2019 годом!
Самое важное, что нужно здесь понимать — позиционирование элементов относительно друг друга.
Пишем в css-файле следующий код:
@import url(‘https://fonts.googleapis.com/css?family=Lobster|Open+Sans&subset=cyrillic’); .wrapper < position: relative; // относительное позиционирование width: 100%; height: 100%; >.wrapper__image < background: url('http://lorempixel.com/400/200/nature/') top center no-repeat; // укажите url к своей картинке background-size: cover; display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; z-index: 0; >.wrapper:after < content: ''; background: rgba(0,0,0,0.7); // фон с прозрачностью 70% display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; >.wrapper__title
Вы можете внести изменения и посмотреть на результат в песочнице:
Другой вариант наложения фона в виде снега:
Голосов: 2 , Средняя оценка: 5
Как вставить одну картинку в другую?
Задание детское, но у меня тупик )))) Нужно добавить на страницу 2 картинки — одну в формате GIF, а вторую — в формате JPEG. Это все понятно. Но нужно ту, что JPEG разместить на на той, что GIF. И еще чтобы JPEG была при этом ссылкой на сайт с оригиналом этой картинки. Со ссылкой тоже проблем нет. Скажите, так возможно вообще размещать — одну на другую? Пишу в блокноте. Заранее спасибо откликнувшимся.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
html> head> title>Моя страничка/title> /head> body bgcolor=#f08080> h1> div align="center"> color=#800080> ГРАФИКА В ГИПЕРТЕКСТЕ /font> /div> /h1> br> img src="узор.gif"> /center> br> div align="center"> a href="http://mindal.mybb.ru/viewtopic.php?id=302&p=3"> img src="цветок.jpg"> /a> /div> /body> /html>
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
одну картинку наложить на другую
Добрый вечер, в заголовок вставляю картинку с градиентом, и сверху хочу наложить другую с городом.
Наложить одну картинку на другую под определенным углом
задание вроде того, что у фидле. нужно наложить одну картинку на другую, при том, что нижняя.
Как средствами php наложить одну картинку на другую?
Нужно наложить допустим две картинки 1.png и 2.png, где 2.png заведомо меньше. Наложить то бишь.
Можно ли одну программу вставить в другую?
Можно ли в паскале одну программу вставить в другую. Если да, то как? Спасибо.
2435 / 1114 / 312
Регистрация: 23.06.2011
Сообщений: 3,525
.cont {position:relative; top:0; left:0;} .cont a {position:absolute; top:0; left:0;}
1 2 3 4 5
div class="cont"> img src="pics/spiral.png" alt=""> a href="#">img src="pics/pict1.jpg" alt="">/a> /div>
Прописан в интернете.
94 / 78 / 11
Регистрация: 06.04.2012
Сообщений: 345
Так же, допустим если gif — это фон, то можно его положить background’ом на body ну или html, а jpg картинку, на какой-нить div или img 🙂
Регистрация: 16.01.2011
Сообщений: 28
newJS, а что писать в атрибуте alt=» «?
Добавлено через 5 минут
Как-то не получается наложить одну картинку на другую. Можно описать механизм поподробнее?
SaNeK_71, первая картинка не должна быть фоном страницы, а именно одну вставить в другую.
Прописан в интернете.
94 / 78 / 11
Регистрация: 06.04.2012
Сообщений: 345
1 2 3 4
div class="pic"> img class="one" src="http://rewinet.com/wp-content/uploads/2013/02/yandex.gif" width="158" height="103"> img class="two" src="http://www.dmwmedia.com/wp-content/uploads/2011/07/Google-logo.jpg" width="200" height="300"> /div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
div.pic{ position:relative; } div.pic img.one{ position:absolute; top:0; left:0; z-index:10; } div.pic img.two{ position:absolute; top:10px; left:70px; z-index:15; }
| Комментарий модератора |
 |
Правила форума пункт 5.19
|
|
