Background — Почему не работает код HTMLCSS


Содержание

Фон в CSS – памятка для начинающих

При вёрстке страниц веб-сайта часто требуется задать фон определённому объекту для улучшения читаемости текста и внешнего вида портала в целом. Какими способами и методами можно задавать фон в CSS?

Работа с фоном в CSS

С помощью свойства background можно задать положение, цвет, изображение, повторяемость и привязку фона, как для отдельных элементов, так и полностью для всего сайта, что по своей сути, кстати, является заданием определённых настроек для тега . Рассмотрим все свойства, которые связаны с заданием фона.

background-color

Задаёт цвет фона. Его можно применять как к отдельным элементам

, так и ко всему веб-сайту с помощью тега .

background-image

Данное свойство используется для вставки фоновой картинки, указывая при этом ссылку на неё.

Обратите внимание на то, как указан путь к картинке. Это значит, что изображение должно находиться в той же директории, что и файл стилей CSS. Иначе придётся указывать полный путь к файлу.

background-repeat

Изображение из предыдущего примера будет повторяться по всему экрану благодаря данному свойству.

Оно может иметь несколько значений:

  • background-repeat: repeat-x — повторение по горизонтали;
  • background-repeat: repeat-y — повторение по вертикали;
  • background-repeat: repeat — повторение и по горизонтали и по вертикали;
  • background-repeat: no-repeat — изображение не повторяется.

Например, повторение по горизонтали выглядит так:

background-attachment

Это свойство определяет фиксирование фонового изображения при скроллинге:

  • background-attachment: scroll — фон прокручивается вместе со страницей;
  • background-attachment: fixed — фон остаётся неподвижным.

background-position

Данное свойство определяет расположение фоновой картинки относительно экрана. Значения свойства представляют собой набор вертикальных и горизонтальных координат, отсчет которых начинается с верхнего левого угла.

Свойство может задаваться в процентном формате, в пикселях, сантиметрах или словесно: top, bottom, center, right, left .

  • background-position: 50% 20% — изображение располагается по центру по горизонтали и на 20% отступает сверху;
  • background-position: 80px 60px — отступ изображения вниз на 80 пикселей от верхнего края и на 60 пикселей вправо от левого:

gradient

Плавный переход от одного цвета к другому, причем переходов допускается несколько.

Использование градиента можно наглядно продемонстрировать в примере кода:

Все приведённые настройки можно сделать в одном свойстве background, записав их в перечисленном порядке.

Если пропустить какое-либо свойство, для него устанавливается значение по умолчанию.

Работа с размером фона в CSS

В CSS 2.1 фоновая картинка сохраняет фиксированный размер, однако в CSS 3 было введено подсвойство size, благодаря которому фоновое изображение может быть растянуто или сжато.

Существует несколько способов, позволяющих определить размер:

Абсолютное изменение размера

Ширина и высота по умолчанию устанавливаются автоматически, а новый размер можно задать с помощью различных единиц измерения.


Например, если исходное изображение имеет разрешение 300 на 300 пикселей, то такой код сделает его ширину в два раза меньше:

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

Код, который масштабирует картинку до размера 100 на 100 пикселей, выглядит так:

Относительное изменение размера

Если применять проценты, размер будет основываться не на изображении, а на элементе.

То есть, ширина фонового изображения зависит от параметров контейнера. Если ширина контейнера составляет 600 пикселей, размер фонового изображения уменьшится до величины 300 на 300 пикселей.

Как показывает практика, использование процентов весьма полезно для адаптивного дизайна.

Масштабирование до максимального размера

В свойстве background-size значение contain масштабирует фоновое изображение так, чтобы оно полностью заполняло контейнер или всю страницу.

Уменьшение или увеличение происходит пропорционально до тех пор, пока высота или ширина не будет выходить за рамки контейнера.

Такой фон страницы будет автоматически подгоняться под любое разрешение:

Заполнение фоном

Используя в свойстве background-size значение cover, фон масштабируется таким образом, чтобы заполнить всё пространство контейнера.

В том случае, если соотношения сторон различаются, картинка обрежется:

Масштабирование сразу нескольких фонов

Они могут быть масштабированы при помощи списка значений, которые разделены запятыми в том же порядке:

Создание полупрозрачного фона в CSS

Полупрозрачный элемент хорошо заметен на фоновом рисунке. В веб-дизайне полупрозрачность достигается за счёт свойства opacity или задаваемого для фона формата цвета RGBA.

Особенность данного свойства заключается в том, что прозрачность действует не только на фон, но и на все дочерние элементы. После увеличения прозрачности, и текст и фон станут полупрозрачными.

Пример создания полупрозрачного блока:

Однако достаточно часто полупрозрачным должен быть только фон определённого элемента, а текст оставаться непрозрачным для читабельности.

В таком случае opacity не подходит и следует воспользоваться форматом RGBA, в котором помимо значений яркости синего, красного и зелёного цветов устанавливается ещё и значение прозрачности. 1 означает абсолютную непрозрачность, а 0 — полную прозрачность.

Пример задания прозрачного фона:

Надеемся, что данное руководство вам пригодилось, и желаем успехов в освоении веб-дизайна!

Работа с картинками (изображениями) в CSS

2013-03-01 / Вр:23:32 / просмотров: 103403

Картинки на сайте имеют две функции: во-первых, они улучшают внешний вид ресурса, во-вторых, помогают воспринимать информацию лучше.
Я не буду здесь делать большое вступление, а приступлю сразу к делу.
Итак, в этой статье я расскажу о всех возможных способах работы с изображениями: вставка фонового изображения, выравнивание изображения, прозрачность, тень от картинки и т.д.

Фоновая картинка.

background | background-image

Если вы хотите добавить фоновую картинку на веб-страницу, воспользуйтесь стилевым свойством background, который задается к селектору body. Задайте путь к изображению внутри значения url.

Как выбрать графический путь? Графический путь будет зависеть от того, где он располагается.
Например, если HTML-файл и фоновый рисунок с именем bg.gif хранятся в одной папке, то достаточно задать url(bg.gif), если фоновый рисунок хранится в папке images, тогда путь будет вот таким url(images/bg.gif).

Совет: учтите, фоновое изображение загружается не сразу, поэтому рекомендую добавлять к фоновому изображению цвет фона, так как цвет загружается моментально. Задайте цвет фону близкий к цвету фонового рисунка.

Повтор фоновой картинки.

background-repeat


Бывают моменты, когда нам необходимо управлять повторами фонового изображения. Например, нам выгодно, чтобы повтор фонового изображения был только по горизонтали или только по вертикали, а бывает момент, что повтор фонового изображения нам вообще не нужен. Итак, как нам выкрутиться в этой ситуации? Воспользуйтесь стилевым свойством background-repeat.

background-repeat: repeat-y | repeat-x | no-repeat;

repeat-y — повтор фонового изображения по оси — у (вертикаль);
repeat-x — повтор фонового изображения по оси — х ( горизонталь);
no-repeat; — запретить повтор фонового изображения (изображение будет как оно есть);

Если не задать стилевое свойство background-repeat, тогда фоновое изображение веб-страницы будет залито полностью фоновой картинкой.

Как добавить две фоновые картинки на веб-страницу.

background

Бываю такие моменты, когда нам необходимо создать два фона для сайта. Например, один фон повторяется по вертикали или по горизонтали, а второй фон выводится без повторения.
Добавим две фоновые картинки старым добрым способом. По крайне мере я знаю точно, все браузеры отображают этот метод.
Зададим фоновое изображение к элементам — HTML и BODY.

Картинка по центру.

Существуют несколько методов установить картинку по центру.

Как в css изменить размер картинки.

background-size

Не зависимо от оригинала картинки, размер можно менять от меньшего до большего. В CSS для изменения размера картинки поможет свойство background-size.
В свойстве background-size могут применяться абсолютные единицы измерения, такие как px, em, cm и др..

По умолчанию ширина и высота установлена как auto, что оставляет исходные размеры изображения.

Например, вы загрузили на сайт картинку размерами 200×200 px, но вам по каким-то причинам нужно ее увеличить до размера 500×200 px . Вот так будут выглядеть параметры background-siz.

Цукерберг рекомендует:  Простой пример использования шаблона jQuery

Можно также указать только одно значение, и это будет считаться шириной. Тогда высота будет как auto и сохранятся пропорции картинки. Посмотрите пример снизу.

а можно вот так:

Обтекание (выравнивание) картинки текстом.

float

Как сделать в CSS так, чтобы на странице изображение обтекало текстом? Выравнивание картинки в CSS аналог HTML-выравнивания картинки , вот только в CSS по какой стороне будет выравнивание элементов определяет float.

float: left | right | none ;

left — выровнять картинку по левому краю, текст обтекает его по правой стороне.

right — выровнять картинку по правому краю, текст обтекает по левой стороне.

none — выравнивание и обтекание не задается (значение по умолчанию).

Здесь я указал отступы текста от картинки

Тень картинки.

box-shadow

Небольшая тень под картинкой придает также странице эффект трехмерности, объёма и глубины. Для добавления тени используется свойство box-shadow.

1. — inset — тень внутри элемента, без inset тень будет наружу;
2. — сдвиг тени по горизонтали (6px — вправо, -6px — влево);
3. — сдвиг по вертикали (6px — вниз, -6px — вверх);
4. — размытие тени (0 — четкая тень);
5. — растяжение тени (3px — растяжение, -3px — сжатие);
6. — цвет тени

box-shadow: 0 0 5px; — тень вокруг элемента

box-shadow: inset 0 0 5px; — тень внутри

Прозрачность картинки.

Начну сразу с примера.

Обратите внимание в коде на opacity:0.4 . Поиграйтесь со значением этого свойства и вы увидите на сколько увеличивается или уменьшается прозрачность картинки.

С наилучшими пожеланиями Webmasterok2009


Background-image не работает

Здравствуйте! Свойство background-image не работает в файле css. Файл находится в папке css. css/style.css

Но в самом файле html свойство background-image работает.

Подскажите, почему не работает, если я размещаю в в файле css?

в css файле пропишите

Между тегами у вас некорректно написана ссылка на файл CSS. Ваш код должен выглядеть так:

Как видите вы не дописали type=»text/css» в теге link .

пол суток пробовал

,а оказывается надо вот так

Всем привет. Была такая же проблема: не работал backgrounf-image: url(link). Мучался часа 2, перепробовал всё, любые модификации но проблема оставалась. Ошибка заключалась в том, что не правильно был указан путь к картинке (файлу), и как не старался — ничего не помогало. Потом, когда я начал думать что html и css — не моё, мне вдруг пришла в голову мысль залезть в настройки. Я пользуюсь Notepad++ и обнаружил вот что: в пункте «Путь по умолчанию» было отмечено «запомнить последнюю директорию», я переставил отметку на «пройти за текущим документом», а в значении селектора background-image указал папку и файл: background-image: url(images/1.jpg) И все заработало. Надеюсь, кому да поможет инфа.

Почему не работают CSS-стили?

Приветствую вас на сайте Impuls-Web!

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

Речь сегодня пойдет о таких ситуациях, когда вы задаете свои css-стили для определенных элементов на вашем сайте, сохраняете все изменения, обновляете страницу и видите, что данные css-стили не применяются. Сегодня мы постараемся разобраться, в чем может быть причина такой проблемы, и как с ней бороться.

Кэширование браузера

Первая причина, по которой внесенные вами изменения могут не применяться может заключаться в банальном кэшировании браузера. Особенно актуально эта проблема проявляется в браузерах Google Chrome.

Дело в том, что этот браузер по умолчанию кэширует все css-стили сайта. Поэтому очень часто, после внесения изменений, при просмотре страницы в браузере Google Chrome нужно либо несколько раз обновить страницу, чтобы изменения вступили в силу, либо очистить кэш браузера.

Кэш браузера здесь очищается следующим образом:

  1. 1. В правом верхнем углу находим значок с тремя точками и открываем меню настроек Google Chrome
  2. 2. Находим пункт «История» =>«История»

Во всех других браузерах кэш чистится аналогичным образом.

Кэширование на хостинге или на сайте

Если вы занимаетесь разработкой сайта и вносите какие-то изменения и при этом у вас на сайте установлен какой-то плагин кэширования, убедитесь в том, что данный плагин у вас отключен. Потому, что он так же может кэшировать css-стили. В итоге стили будут написаны правильно, будут применяться, но вы просто не будете видеть изменения, из-за того, что у вас в кэше находится еще старая версия файлов.

Ошибки в коде

Следующая ситуация, когда стили могут не срабатывать – это ошибки в коде. Особенно это актуально в тех случаях, если вы вносите изменения через встроенный редактор WordPress. Здесь нет подсветки кода и какую-то ошибку в написании того или иного css-свойства очень легко не заметить.

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

Не правильно выбранный селектор

Для тех, кто еще не знает, селекторами в css называются та часть кода (те строки), через которые происходит выборка или обращение к тому или иному элементу. Это либо название класса, либо название идентификатора, либо название какого-то html-тега, для которого вы хотите применить определенные стили.

Как же всё таки определить правильно ли вы указали селектор или нет?

Я в таких случаях использую один очень простой прием, который называется задание красной рамки.

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

    1. Для начала мне нужно вычислить его класс или идентификатор. При помощи инспектирование кода определяю что блок имеет класс site-branding.

Таким образом я задаю для этого элемента рамку толщиной 1 пиксель, сплошную, красного цвета.

  • 3. После сохранение изменений для указанного блока должна появиться красная рамка.

  • Если для указанного в css-файле элемента красная рамка появилась, значит селектор указан правильно, и все остальные стили которые для него будут дописываться, тоже должны будут примениться.

    Если же такая рамка не появилась, то это означает, что селектор выбран не правильно, либо заданные мной стили перекрываются стилями темы и необходимо повышать их приоритет.

    О приоритете стилей я расскажу чуть ниже.

    Если этот фон для указанного элемента применился, значит селектор определен правильно.

    Приоритеты стилей

    Теперь давайте рассмотрим еще одну очень распространённую ситуацию, когда вы применяете какие-то CSS-стили, убедились в том, что браузер у вас ничего не кэширует, на сайте никаких плагинов кэширования нет, селектор определен правильно, но стиль почему-то не применяется.

    В чем здесь может быть причина?

    Чаще всего такие ситуации возникают из-за того, что где-то в самой теме уже указаны стили для того или иного элемента и приоритет у этих стилей выше, чем у тех стилей, которые вы задаете в самом конце.

      1. Самый высокий приоритет будет иметь тот селектор, в котором указано название тега.
      К примеру, div или span, или h1, или любой другой тег.

    2. На втором месте по приоритету будут идти идентификаторы. Когда у вас на сайте есть блок, для которого написано >

    В CSS это будет выглядеть следующим образом:

    3. На третьем месте по приоритету стоят классы, когда для определенного блока написано >

    В CSS это выглядит так:

    Как поднять приоритет стилей?

    Если вы столкнулись с ситуацией, когда вы написали для определенного блока какие-то CSS-стили, но они у вас не применяются и перекрываются стилями темы, то здесь вам нужно поднимать приоритет написанных вами css-стилей.

    Сделать это можно двумя способами:

      1. Можно воспользоваться правилом !important. Выглядит это следующим образом:

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

  • 2. Второй способ заключается в увеличении селектора. Если у вас, к примеру, есть блок с классом site-branding и этот блок находится внутри еще какого-то блока, который имеет, к примеру, идентификатор. То для того, что бы повысить приоритет стиля вы можете указать цепочку вложенности классов и идентификаторов для этого блока блока.
  • Давайте рассмотрим это на примере. Возьмем тот же блок site-branding и при помощи инспектора кода видим, что он находится в теге , который имеет идентификатор masthead.

    Копируем этот идентификатор, и перед названием класса ставим решетку, вставляем название идентификатора и ставим пробел:

    Данное css-свойство будет работать для блока с классом site-branding, находящегося внутри блока с идентификатором masthead.

    Так же мы можем пойти дальше и указать еще здесь, к примеру, тег body. В данном случае это будет выглядеть вот так:

    Указанные здесь CSS стили должны будут работать для всех блоков с классом site-branding, которые находятся внутри блока с идентификатором masthead, которые, в свою очередь, находятся внутри тега .

    Подведем небольшой итог. Если какое-то css-свойство у вас не срабатывает и перекрывается стилями темы, то вы можете поднять его приоритет, либо дописав ему правило important, либо увеличив селектор для этого блока. В отдельных случаях приходится делать и то и другое.

    К примеру, если вы для какого-то блока укажите фон сначала красный, а потом для этого же блока укажите, к примеру, фон зеленый, то применится тот фон, который вы указали последним. В нашем случае он будет зеленым.

    Так же помимо перечисленных здесь причин и приемов их устранения могут быть и другие ситуации, когда определенные стили для тех или иных элементов могут просто не срабатывать. Это связано с тем, что в CSS есть такое понятие как строчные элементы, блочные элементы, табличные элементы, и есть определенный набор CSS-свойств, который работает только для блочных элементов, и не работает для строчных. Либо работает только для строчных и не работает для остальных и так далее.

    Все это довольно обширная тема и более подробно об этом я как-нибудь расскажу в одной из отдельных статей.

    Видеоинструкция


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

    Я желаю вам успехов в создании и продвижении ваших проектов! Если данная статья была для вас полезна не забывайте оставлять комментарии и делиться статьей в социальных сетях.

    Почему не работает css

    Ссылка на файл

    Код CSS может находиться как в HTML документа, так и в отдельном файле с одноименным расширением. Если CSS находится во внешнем файле и не работает, то первым делом следует проверить ссылку в HTML коде.

    Ссылка (href) должна писаться в одиночном теге link. Содержимое link в HTML5 должно выглядеть следующим образом: href=”style.css” rel=”stylesheet”. Не забывайте, что сам тег link располагается между парными ключевыми тегами head.

    После значения href указывается имя того css-файла, который должен быть прикреплен к документу (это не обязательно style). Если файл со стилями находится в другой папке, то обязательно через слэш (/) необходимо указать путь к нему.

    Синтаксис CSS

    Если со ссылкой все в порядке, а CSS все равно не работает, нужно проверить синтаксис в коде.

    Во-первых, проверьте селектор. Селектор должен совпадать с тем, что у вас написано в html-файле. То есть, если в html выбран >
    Сам блок, где объявляется стиль, пишется после имени селектора в фигурных скобках. Между названием свойства и его значением ставится двоеточие, а после — точка с запятой.

    Браузер

    Если браузер, на котором вы проверяете свой css-код, уже устарел, то он не в состоянии корректно отображать язык CSS3. Поэтому в случае, если код не работает, обновите свой браузер до последней версии.

    Используйте для тестирования разные браузеры: Opera, Google Chrome, Firefox. Не рекомендуется полагаться на Internet Explorer, так как его разработка для Microsoft не является главной задачей, что приводит к его «несостоятельности» по отношению к CSS3.

    Новые версии браузеров для отладки кода содержат специальный модуль, позволяющий редактировать код сразу в браузере. Для этого необходимо в контекстном меню окна кликнуть «Показать исходный код».

    Наследование

    Сложнее всего разбираться в CSS с наследованием. В то время, как она чаще всего и является основой нерабочего кода.

    CSS работает по тому же принципу, что и матрешки. Один контейнер вкладывается в другой, в него третий и т.д. Чтобы изучить все тонкости наследования, необходимо потратить немалое количество времени. Начать же можно с элементарного.

    Сначала логически постарайтесь выявить, где именно происходит ошибка в css-коде. Вы легко это поймете, т.к. в результате ошибки один из элементов при отображении в браузере будет выпадать из представленной вами картины.

    Когда вы найдете контейнер или другой элемент, к которому применен не сработавший стиль, внимательно посмотрите, во что «вложен» этот элемент.

    Возможно, родительский элемент содержит свойство, которое не дает работать другому свойству в дочернем элементе. Подробнее о наследовании можно почитать в любом справочнике по CSS.

    Баг в CSS Chrome, разрушивший наш сайт

    Это реальная история, случившаяся с нашим сайтом во время празднования Дня Благодарения.

    Сайт перестал работать внезапно, ничего не предвещало такого оборота.

    Поначалу я подумал, что проблема в нашем провайдере хостинга, потому что с ним уже случались проблемы ранее. Наш сайт уже трижды успевал «падать» по разным причинам, и это выглядело как типичная проблема с их стороны.

    Когда мы пытались открыть сайт, то видели лишь пустую страницу, увы. пару раз после обновления удалось даже обновить страницу, но она не листалась вниз, никакие элементы типа ссылок не работали. Такое было везде, а не только на главной странице.

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

    Следующим шагом была проверка логов с ошибками в cPanel. Неудача.

    Это означало, что причиной сего страшного бага была не хостинговая компания. И тут я понял, что у нас большие проблемы. Чувствуя себя полностью виноватым, каясь, я начал дебажить свой код.

    Отладка кода

    Первым делом мною был проверен код JavaScript через консоль. Неа.

    Удивительно, в JavaScript все исправно, но сервер не работает. К моему удивлению все просто замечательно работало в Firefox.

    Что-то страшное стало происходить, и я это понял. Код сайта не обновлялся около недели. Более того, оно работал исправно дольше года. Как вдруг мое творение могло внезапно перестать отображаться в Chrome?

    Набрал в Google “сайт медленно прокручивается в chrome” и увидел пост с упоминанием background-size: cover , который вызывал проблемы на некоторых ресурсах. В каждом посте нашего блога присутствуют изображения-обложки статей, использующие свойство background-size: cover для придания отзывчивости.

    Я удалил эту строчку, но ничего не поменялось. Возможно, что есть еще какие-то ошибки в использовании CSS? Например, какое-нибудь преобразование, чересчур перегружающее компьютер?

    Это изображение было в чем-то уникально, из-за чего я продолжил играться с его HTML и CSS. Когда я добавил display: none , остальная часть сайта заработала. Просвет!


    Таким образом, я начал убирать свойства одно за другим, пока не нашел источник головной боли:

    Всего лишь одна строка смогла вывести из строя весь ресурс!

    Как я это исправлял

    Этот box-shadow присутствовал не только в эстетических целях. Он также создавал темный фон для заголовка поста и меню с навигацией, без чего текст был бы нечитаемым.

    Необходимо было как-то его вернуть. Для этого я создал два новых псевдоэлемента position: absolute и еще каплю магии с background-image: linear-gradient .

    Эффект создавался тот же, но только теперь сайт работал.

    Конечно, это не идеальный выход, хотя… С box-shadow у меня была возможность создавать красивые рамки. С 2 градиентами я лишь могу придавать эффект тени в верхней и нижней части картинки.

    Собственно, в чем проблема?

    Это был даже не код, который был мною заменен, но ошибка все равно кроется в CSS. Это реальный, открытый баг Chrome, представленный в его последней версии, M39, обнаруженный 26 ноября 2014 года.

    Кратко говоря, в браузере возникает ошибка при подсчете параметров теней с большими числами. Я заметил, что проблема начинается примерно с 200px. Баг не влияет на использование outset в box-shadow , а лишь на inset .

    Вы можете наблюдать его в действии здесь, используя Chrome.

    Попробуйте прокручивать колесико мыши вверх и вниз, и, в зависимости от быстроты вашего компьютера, браузер начнет зависать все больше и больше. Сделайте box-shadow больше (1000px), и все перестанет работать вообще. Затем просто закомментируйте известные нам строки, и браузер вернется к жизни.

    Думая, множество других сайтов когда-то испытали подобную напасть. Лично мне удалось заметить это на сайте французского подразделения Toyota, но на данный момент проблема устранена.

    Вывод

    Несколько лет назад такая ошибка могла быть приемлемой и даже ожидаемой. Однако, в наши дни это недопустимо, так как возможности в программировании крайне большие, и играться с CSS никто не запрещал.

    Вам может показаться, что box-shadow таких размеров встречается нечасто, и вы будете неправы. Фоновое изображение размером 1980px встречаются крайне часто на больших экранах, и, к сожалению, другого способа их качественной обработки, кроме box-shadow , нет. Я надеюсь, что команда Chrome закроет этот баг.

    Background — Почему не работает код? HTML/CSS

    Использование свойства RGBa становится всё более популярным. Работает это свойство, конечно, не во всех браузерах, но есть отличный способ сделать альтернативный сплошной цвет, объявив его перед значением RGBa.

    Приведённый пример отлично работает, однако выяснилась одна интересная ошибка, которая появляется в IE6 и 7 (исправлена в IE8).

    Смысл в том, что приведённый пример работает только если вы используете сокращённую запись свойства. Если же вы объявите цвет следующим образом:

    То есть опишете только свойство background-color, то IE вовсе не покажет фон.

    Есть два способа не наткнуться на эту проблему. Во-первых использовать сокращённую запись, а во-вторых, не использовать функцию RGB (использование которой очень удобно и наглядно), а вместо неё писать цвет в шестнадцатеричном формате.

    Работа с картинками (изображениями) в CSS

    2013-03-01 / Вр:23:32 / просмотров: 103403

    Картинки на сайте имеют две функции: во-первых, они улучшают внешний вид ресурса, во-вторых, помогают воспринимать информацию лучше.
    Я не буду здесь делать большое вступление, а приступлю сразу к делу.
    Итак, в этой статье я расскажу о всех возможных способах работы с изображениями: вставка фонового изображения, выравнивание изображения, прозрачность, тень от картинки и т.д.

    Фоновая картинка.

    background | background-image

    Если вы хотите добавить фоновую картинку на веб-страницу, воспользуйтесь стилевым свойством background, который задается к селектору body. Задайте путь к изображению внутри значения url.

    Как выбрать графический путь? Графический путь будет зависеть от того, где он располагается.
    Например, если HTML-файл и фоновый рисунок с именем bg.gif хранятся в одной папке, то достаточно задать url(bg.gif), если фоновый рисунок хранится в папке images, тогда путь будет вот таким url(images/bg.gif).

    Совет: учтите, фоновое изображение загружается не сразу, поэтому рекомендую добавлять к фоновому изображению цвет фона, так как цвет загружается моментально. Задайте цвет фону близкий к цвету фонового рисунка.

    Повтор фоновой картинки.

    background-repeat

    Бывают моменты, когда нам необходимо управлять повторами фонового изображения. Например, нам выгодно, чтобы повтор фонового изображения был только по горизонтали или только по вертикали, а бывает момент, что повтор фонового изображения нам вообще не нужен. Итак, как нам выкрутиться в этой ситуации? Воспользуйтесь стилевым свойством background-repeat.

    background-repeat: repeat-y | repeat-x | no-repeat;


    repeat-y — повтор фонового изображения по оси — у (вертикаль);
    repeat-x — повтор фонового изображения по оси — х ( горизонталь);
    no-repeat; — запретить повтор фонового изображения (изображение будет как оно есть);

    Если не задать стилевое свойство background-repeat, тогда фоновое изображение веб-страницы будет залито полностью фоновой картинкой.

    Как добавить две фоновые картинки на веб-страницу.

    background

    Бываю такие моменты, когда нам необходимо создать два фона для сайта. Например, один фон повторяется по вертикали или по горизонтали, а второй фон выводится без повторения.
    Добавим две фоновые картинки старым добрым способом. По крайне мере я знаю точно, все браузеры отображают этот метод.
    Зададим фоновое изображение к элементам — HTML и BODY.

    Картинка по центру.

    Существуют несколько методов установить картинку по центру.

    Как в css изменить размер картинки.

    background-size

    Не зависимо от оригинала картинки, размер можно менять от меньшего до большего. В CSS для изменения размера картинки поможет свойство background-size.
    В свойстве background-size могут применяться абсолютные единицы измерения, такие как px, em, cm и др..

    По умолчанию ширина и высота установлена как auto, что оставляет исходные размеры изображения.

    Например, вы загрузили на сайт картинку размерами 200×200 px, но вам по каким-то причинам нужно ее увеличить до размера 500×200 px . Вот так будут выглядеть параметры background-siz.

    Можно также указать только одно значение, и это будет считаться шириной. Тогда высота будет как auto и сохранятся пропорции картинки. Посмотрите пример снизу.

    а можно вот так:

    Обтекание (выравнивание) картинки текстом.

    float

    Как сделать в CSS так, чтобы на странице изображение обтекало текстом? Выравнивание картинки в CSS аналог HTML-выравнивания картинки , вот только в CSS по какой стороне будет выравнивание элементов определяет float.

    float: left | right | none ;

    left — выровнять картинку по левому краю, текст обтекает его по правой стороне.

    right — выровнять картинку по правому краю, текст обтекает по левой стороне.

    none — выравнивание и обтекание не задается (значение по умолчанию).

    Здесь я указал отступы текста от картинки

    Тень картинки.

    box-shadow

    Небольшая тень под картинкой придает также странице эффект трехмерности, объёма и глубины. Для добавления тени используется свойство box-shadow.

    1. — inset — тень внутри элемента, без inset тень будет наружу;
    2. — сдвиг тени по горизонтали (6px — вправо, -6px — влево);
    3. — сдвиг по вертикали (6px — вниз, -6px — вверх);
    4. — размытие тени (0 — четкая тень);
    5. — растяжение тени (3px — растяжение, -3px — сжатие);
    6. — цвет тени

    box-shadow: 0 0 5px; — тень вокруг элемента

    box-shadow: inset 0 0 5px; — тень внутри

    Прозрачность картинки.

    Начну сразу с примера.

    Обратите внимание в коде на opacity:0.4 . Поиграйтесь со значением этого свойства и вы увидите на сколько увеличивается или уменьшается прозрачность картинки.

    С наилучшими пожеланиями Webmasterok2009

    Не работает свойство background-color:none

    Если у вас вдруг не работает CSS свойство «background-color» с параметром «none», то не стоит переживать.


    Просто бразуер он воспринимает «none» как ошибку. Для того, что-бы Ваш фон стал прозрачным, необходимо передать ему параметр «transparent».

    А то сам долго не мог понять почему ничего не происходит, думал ошибка в селекторах.

    Если вам понравился данный материал, пожалуйста, нажмите на кнопку от лайка
    (находятся ниже) – чтобы о нем узнали другие люди.
    Буду вам очень благодарен! Спасибо!

    Фон для сайта (свойство CSS background)

    Если вы заметили, слегка приукрасил Дизайн Манию, добавил текстуры в фон. Сразу же появилась идея рассказать вам как именно мне удалось это сделать. Открываю данным постом рубрику «Верстка» раздела «Веб-дизайн». В данной категории планирую публиковать статьи, заметки, рекомендации и уроки по HTML, CSS, а также, возможно, JavaScript. Материал постараюсь размещать простой и с пояснениями, чтобы понятно было всем читателям. Думаю, подобная информация пригодится многим блоггерам, которые хотят, но не могут подправить собственные дизайны из-за отсутствия навыков верстки.

    Итак, с помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость бекграунда как для отдельного элемента, так и для всего сайта. Последнее, по сути, является заданиям настроек для тэга body. Рассмотрим все свойства, связанные с фоном (background). Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства в таком же порядке, как я рассматриваю ниже:

    Background-color

    Задает цвет фона. Можно применять к отдельным элементам

    или ко всему сайту через через тэг :

    /* черный фон сайта */ body < background-color: #000; >/* черный фон заголовка, белый цвет шрифта */ h1

    Background-image

    Используется для вставки фонового изображения, при этом в css указываем ссылку на картинку:

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

    Background-size

    Определяет размер фонового изображения.

    Для свойства есть несколько интересных особенностей. Кроме числовых значений размеров (px,pt) можно использовать процентные или автоматическое вычисление (auto — например для одной из стороны картинки — 500px auto). Данное свойство применяется для создания фона для сайта с картинкой на весь экран.

    Если указать значение cover, то фон будет масштабироваться дабы ширина и высота картинки = ширине и высоте блока. Если использовать значение contain, то масштабирование будет с сохранением пропорций чтобы изображение полностью поместилось в блок.

    Background-repeat

    Используемое в предыдущем примере изображение будет «растиражировано» (повторяется) по всему экрану. Данное свойство призвано управлять этим процессом. Имеется несколько допустимых значений:

    • background-repeat: repeat-x — изображение повторяется только по горизонтали
    • background-repeat: repeat-y — изображение повторяется только по вертикали
    • background-repeat: repeat — изображение повторяется по горизонтали и вертикали
    • background-repeat: no-repeat — изображение не повторяется

    background-attachment — данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:

    • background-attachment: scroll — прокручивается вместе со страницей
    • background-attachment: fixed — при прокрутке фон остается неподвижным

    Background-position

    Задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали), которые начинаються с левого верхнего угла. Может задаваться:

    • в фиксированных единицах (пикселы, сантиметры)
    • в процентах
    • словесно: — top (сверху), bottom (снизу), center (по центру), left (слева) и right (справа).
    • background-position: 20px 50px — изображение отступает вниз на 20 пикселей сверху и вправо на 50 от левого края.
    • background-position: 50% 25% — расположено по центру по горизонтали и отступает на 25% сверху.
    • background-position: right bottom — рисунок располагается снизу справа.

    Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:

    [background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

    background: #000 url(«my-image.jpg») no-repeat fixed left bottom;

    Если какое-то свойство пропускается, то его значение установлено по умолчанию.

    Надеюсь, данный урок вам пригодился, подписываемся на обновления блоге через RSS, дальше вас ожидает еще много интересных секретов!

    Цукерберг рекомендует:  Mysql - Запрос SELECT в mysql - нужна помощь, еще раз.
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих