Как поменять картинку на сайте через код элемента
Перейти к содержимому

Как поменять картинку на сайте через код элемента

  • автор:

Как изменить картинку на сайте при определенном разрешении?

Необходимо, чтобы при мобильном разрешении была одна картинка, а при десктопном разрешении — другая. Как это можно осуществить?

Отслеживать
10.5k 7 7 золотых знаков 25 25 серебряных знаков 41 41 бронзовый знак
задан 28 июл 2017 в 13:27
123 1 1 золотой знак 1 1 серебряный знак 6 6 бронзовых знаков
гуглить css media queries
28 июл 2017 в 13:35
Что именно за картинка? Фон или img?
28 июл 2017 в 13:37
Картинка img,не фон
28 июл 2017 в 13:49

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Медиа-запрос
Допустим, по дефолту имеем background-image:url(«images/main.png»); И определяем медиа-запрос для девайсов с разрешением от 320 до 500 пикселей:

@media (min-width:320px) and (max-width:500px) < .your-block < background-image:url("images/mobile.png"); >> 

Если нужно, чтобы менялась именно содержательная картинка(вставленная с помощью тега img в ваш html — алгоритм тот же, только у вас должно быть две картинки, допустим одна имеет класс mobile-img , вторая соответственно main-img . И получаете что-то вроде вот такого css

.mobile-img < display:none; >@media (min-width:320px) and (max-width:500px) < .mobile-img < display:block; >.main-img < display: none; >> 

Отслеживать
9,634 4 4 золотых знака 35 35 серебряных знаков 73 73 бронзовых знака
ответ дан 28 июл 2017 в 13:37
Klimenko Kirill Klimenko Kirill
2,216 1 1 золотой знак 12 12 серебряных знаков 37 37 бронзовых знаков
Я бы использовал js, чтобы не грузить большие картинки на мобильные
28 июл 2017 в 16:15
Можно и так, но это ведь уже вопрос опитимизации)
28 июл 2017 в 16:21

Смотрите в сторону атрибутов srcset, sizes у элемента img или используйте возможности элемента picture. Элемент picture имеет более «продвинутые» возможности.

Можно не только изменять (увеличивать или уменьшать) фактический размер картинки при различных плотностях или разрешения экрана устройства, но, например, отобразить вместо альбомной картинки — картинку портретной ориентации, что порой бывает полезно при создании адаптивного/отзывчивого сайта или приложения.

Поддержка браузерами srcset и picture.

Но там где возможно, например для логотипа, лучше использовать векторный формат изображений — SVG. Формат широко поддерживается браузерами.

Document img

Какой код поменять, чтоб сменить фон сайта?

Здравствуйте, хочу сменить фон и дизайн основы сайта.
Копался в ccs, но не могу понять, какой именно отрезок кода менять и на что.
Если конкретного ответа на вопрос нет, то просьба не рекомендовать изучать html и css, так как уже это делаю.Спасибо

Villeres
21.01.16 в 00:01

Комментарии (16)

Павел Романов 21.01.2016 11:42 #

Зайдите на сайт. Нажмите F12. Откроется консоль.
Найдите элемент с фоном (элементы подсвечиваются, когда проводите курсором по коду) и посмотрите какие CSS-атрибуты ему присвоены. Там же будет имя CSS-файла с оформлением и номер строки, где указано конкретное правило.
Отредактируйте нужное.

Антон 21.01.2016 14:56 #
Ну вы хоть ссылку на сайт дайте и объясните что на что поменять желаете

Villeres 21.01.2016 15:13 #

www.evakmos.ru/ вот сайт, хочу сделать темный фон везде и шрифты в основе поменять.

еще убрать желтый и оранжевые цвета полностью

Комментарий был изменён 21.01.2016 в 15:13
Антон 21.01.2016 15:26 #

За фон у вас отвечает картинка по адресу www.evakmos.ru/images/body.png
Либо замените картинку, либо в style.css отредактируйте 53 строку вписав туда новое изображение

body < margin: 0;background-image: url(../images/body.png);

если лень заморачиваться с изображением, то измените эту строку на

body < margin: 0;background-color: #5F3C3C;

И закоментируйте в 156 строке белый фон
например так

body < font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; color: #999999;/* background-color: #fff; */>

Шрифт меняется так же в 156 строке
Остальные цвета аналогично

Villeres 21.01.2016 16:44 #

спасибо, заменил body.png.а желтый цвет как убрать?
Антон 21.01.2016 16:55 #
В меню менять на 1731 строке файла style.css

@media (min-width: 992px) < .navigation >

Градиент для каждого браузера персонально

В футере менять на 1684 строке

.footer-bottom

Villeres 21.01.2016 17:11 #

сделал сначала на 1731 строке, желтый цвет стал более тусклым просто.

потом сделал футер и все стало как раньше… яркий желтый цвет везде

Антон 21.01.2016 17:15 #

Та я вам ничего и не менял, это из вашего css, я просто указал где именно менять. Замените коды цвета на те которые вам больше нравятся.

Villeres 21.01.2016 17:40 #

заменил цвета, но не вышло все равно
Антон 21.01.2016 17:56 #

В меню меняйте цвета градиента для каждого браузера, подробнее тут
В футере меняйте значение background: #xxxxxxx

Villeres 21.01.2016 18:12 #

"@media (min-width: 992px) < .navigation background-color: #e2e2e2;
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
background: linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
padding: 10px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@col', endColorstr='@col2', GradientType=0);
border-radius: 0 0 18px 18px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.9) inset, 0 1px 4px rgba(0, 0, 0, 0.2);
border: 1px solid #dccf00;
height: 40px;
margin-bottom: 10px;
position: relative;
z-index: 1;> >"

то есть вот таких вот кодов должно быть 5?(если под 5 браузеров)

только менять в них первую строчку( background: -moz-linear-gradient)?

Антон 21.01.2016 18:49 #

Нет, код должен быть один, только этот
Селектор background: -moz-linear-gradient отвечает за градиент в FF
Селектор background: -webkit-linear-gradient отвечает за градиент в Webkit браузерах (chrome, safari . )
Селектор background: -o-linear-gradient отвечает за градиент в опере
Селектор background: -ms-linear-gradient отвечает за градиент в ie
Я же вам ссылочку дал, почитатайте, полезно же

Антон 21.01.2016 18:59 #

Пожалейте людей с мобильным трафиком, поставьте картинку в бэкграунд поменьше. У вас же ЦА это люди с мобильных браузеров.

Villeres 21.01.2016 19:06 #

как поменять картинку js

Для того, чтобы поменять картинку нужно изменить атрибут src у элемента на новый путь к картинке.

 id="myImg" src="old-image.jpg" alt="Old Image">  onclick="changeImage()">Change Image function changeImage()  const myImg = document.getElementById('myImg'); myImg.src = 'new-image.jpg'; > /scirpt> 

В результате выполнения кода выше, картинка на странице будет заменена на новую.

Как вставить картинку в HTML-код страницы

В статье разбираем, как добавить картинки в HTML-код: какой формат изображения подходит, как изменить размер картинки в HTML, как задать выравнивание и добавить рамку.

как добавить картинки в html

Наш мозг устроен так, что мы лучше воспринимаем и запоминаем информацию, которая подкреплена визуальными образами. Можно потратить время на то, чтобы вспомнить и записать закон всемирного тяготения, но образ Ньютона, которому на голову падает яблоко, представляется сразу. Вспомните, сколько полезной информации сразу же ассоциируется с конкретной картинкой, схемой или иллюстрацией.

Точно так же визуальная составляющая важна для сайтов. Изображения привлекают внимание, помогают с восприятием информации и влияют на внешний вид страниц. Посмотрите на подборку красивых сайтов из галереи SiteSee — на них большая часть информации в картинках.

Если вы делаете сайт на движке, скорее всего, картинки на страницы можно добавить с помощью конструктора. Но если у вас самописный сайт или вы решили с нуля сверстать красивую рассылку, вам придется вставить изображение в HTML-код. Это несложно, но для новичка в сайтостроении может показаться задачей со звездочкой.

В статье пошагово и не торопясь разбираемся, как добавить картинку в HTML ��

Как вставить картинку в HTML-код:
  1. Выбрать изображение
  2. Определить формат изображений
  3. Выбрать название файла картинки
  4. Использовать img-тег
  5. Вставить ссылку в картинку
  6. Шпаргалка: как добавить картинку в HTML-код страницы

Выбрать изображение

Перед тем как добавить изображение в HTML-код сайта, найдите источник, с которого можно скачать картинки. Если используете фотографии, которые сделали самостоятельно, никаких проблем не возникнет. Другое дело, если планируете в качестве фона или дополнения к дизайну страницы вставить картинку в HTML из интернета. Размещение изображений на сайте без учета авторского права владельца может повлечь за собой неприятные последствия — вас могут заставить удалить картинку или даже оштрафовать.

Чтобы обезопасить себя, проверяйте условия, на которых разрешено использовать выбранные изображения.

Использование картинок регулирует группа лицензий Creative Commons. Это американская некоммерческая организация, которая разработала варианты соглашений, по которым в интернете распространяется контент.

На сайтах для скачивания картинок встречаются такие лицензии и условия использования бесплатных изображений:

  • CC Attribution — чтобы использовать скачанные картинки, укажите автора.
  • CC Attribution-NoDerivs — укажите автора и не видоизменяйте исходное изображение.
  • CC Attribution-NonCommercial — укажите авторство и используйте картинку в некоммерческих целях.
  • СС0 или Public Domain — можете свободно использовать в любых проектах без указания авторства.

Для платных изображений есть такие типы лицензий:

  • Royalty-Free — покупаете картинку один раз и используете изображение без временных ограничений. Эксклюзивные права остаются у автора.
  • Editorial — такие картинки нельзя использовать в коммерческих целях.
  • Rights-Managed — получите исключительное право на использование картинки.

Вот список сервисов с бесплатными изображениями:

Они предлагают миллионы бесплатных картинок в высоком разрешении под лицензией СС0, которая дает свободно пользоваться ими для своих целей.

Если не нашли нужную картинку на бесплатных стоках, продолжите поиски на платных сервисах:

Большинство изображений распространяются по Royalty-Free лицензии.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *