- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Помогите, пожалуйста, сделать фото под рамкой и не выезжающим за границы рамки, независимо от ширины фото (при любом размере фотографии).
https://jsfiddle.net/Ulenka1984/qw8zbp56/
Как в примере:
Не подскажу именно по коду, но вам нужно делать это через фон, а не вставку картинкой.
Далее играться с методами расположения этого фона в div-е
Не подскажу именно по коду, но вам нужно делать это через фон, а не вставку картинкой.
Далее играться с методами расположения этого фона в div-е
Вот здесь разместила код со стилями https://jsfiddle.net/Ulenka1984/qw8zbp56/
В вашем случае, тут три слоя.
1 фон - розовый с белой рамкой
2 картинка - фотка
3 "нахлобучка" (розовый текст и сердечки)
Собсно так и делайте.
три дива. в один png с фоном, в другой картинку, ну а третьим всё накрыть.
И лучше не заморачиваться и делать в абсолютных значениях. или на худой конец через CALC
ps. хотя... можно и так накрыть
как у вас
.wrapper {
background: blue;
width: 600px;
height: 600px;
display:block;
position:relative;
}
.qwert {
display:block;
position:absolute;
left:0;
top:0;
width:600px;
height:600px;
z-index:1;
}
.img11 {
display:block;
position:absolute;
left:123px;
top:129px;
width:382px;
height:382px;
object-fit: cover;
overflow:hidden;
z-index:0;
}
В вашем случае, тут три слоя.
Вы мой герой! Спасибо огромное, то, что надо!
Появилась проблема. Это шаблон письма, который нужно отправить с сайта. Помогите, пожалуйста, какими стилями можно обойти то, что удаляет почтовый сервер.
<img style="display:block;position:absolute;left:0;top:0;width:600px;height:600px;z-index:1;"<img style="display:block;width:600px;height:600px;"<img style="display:block;position:absolute;left:123px;top:129px;width:382px;height:382px;object-fit:cover;overflow:hidden;z-index:0;"<img style="display:block;height:382px;overflow:hidden;width:382px"Я бы сейчас рассказал притчу-тост про правильно выданное техническое задание, но боюсь меня после него забанят. )))
Если нужно прислать картинку под фоном в имейле, то боюсь, эта задача неразрешимая.
Почтовики срезают практически всё. Особенно, это касается стилей, мняющих свойства блоков.
Поэтому то, что было написано выше будет работать только в браузерах. Мало того - только в свежих браузерах, поддерживающих цсс3.
Ну или на стороне сервера генерировать композитное изображение и вставлять как готовую картинку в тело мыла.
Если это до 5 писем в минуту - то будет терпимо. Если больше, то сервер тоже ляжет (не думаю, что у вас дедик под сайт выделен.)
зачем вам эти наложения? генерируйте картинку, сохраняйте и посылайте ее в письме...
Спасибо за ответы! Тем не менее получилось для почты решить:
<div style="background:#ffffff;margin:0 auto 0 auto;max-width:600px"> <table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;max-width:600px;width:100%"> <tbody> <tr> <td align="center" style="line-height:0;padding:0px" valign="top"> <div style="background-color:#ffa5bf;width:600px;height:600px;background-image: url('https://love.romanticcollection.ru/wp-content/uploads/24177961-845c9047.jpg');background-size:500px auto;background-repeat:no-repeat;background-position: center center;"> <div style="background-image: url('https://love.romanticcollection.ru/wp-content/uploads/love-frame.png'); width: 100%; height: 100%"> </div> </div> </td> </tr> </tbody> </table> </div>в гугле будет все по-другому, я уж не говорю про мейл ру.
А Аутлук вообще все фоновые картинки выкинет и не поморщится