Style image background: CSS background-image property

Разное 

html. Есть ли способ применить стиль к фоновому изображению?

спросил

Изменено 10 лет, 3 месяца назад

Просмотрено 233 раза

CSS 

 #lego{
    фон: url(images/lego.png) без повторов по центру внизу;
}

HTML

Без добавления каких-либо тегов или HTML.

Без JavaScript. Лего

имеет ширину 100%, а изображение — нет.

Как применить box-shadow (или другой стиль) только к изображению (не к 100% широкому элементу лего).

  • HTML
  • CSS

2

Нет. Добавьте тень к реальному изображению.

Редактировать: Однако CSS3 позволяет использовать несколько фонов, так что, возможно, вы можете с этим повозиться.

Multiple Backgrounds with CSS3

вы можете использовать css псевдо: до или: после элементов, чтобы содержать ваше изображение, чтобы вы могли просто дать элементу : до тень, но не лего див. Проверьте эту скрипку — http://jsfiddle.net/cNeWW/

 #lego{
    ширина: 100%;
    положение: родственник;
}
#лего:до{
    содержание: "";
    фон: url(images/lego.png) без повторов в центре внизу;
    положение: абсолютное;
    ширина: <ширина фона>;
    height: <высота фона>;
    дисплей: блок;
    box-shadow: 5px 5px 3px #000;
}

2

Невозможно стилизовать изображение, которое является фоновым изображением элемента. Фоновое изображение является частью стиля элемента.

Для этого можно использовать тег (используя position и box-shadow) или добавить тень к самому изображению в Photoshop или другой программе редактирования изображений.

Это невозможно.

Вы не можете. Стили CSS применяются к элементам DOM, фоновое изображение не является элементом DOM. Вы можете сделать что-то вроде этого:

CSS:

 #lego .image {
    фон: url(images/lego.png) без повторов по центру внизу;
    ширина: 
 
;
    высота: ;
    тень коробки: ...
    ...
}

HTML:

 

    <дел>

Я считаю, что это невозможно. CSS может стилизовать только элементы HTML, а фоновое изображение не является элементом. Но вы можете либо добавить тень к самому изображению (используя Photoshop или что-то подобное), либо вы можете попробовать использовать #logo:после и поэкспериментируйте с ним, возможно, он сможет сделать то, что вы задумали.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Как использовать параметр «Стиль фона»

Параметр «Стиль фона» — это один из различных способов настройки элемента Thrive Architect. Опция доступна для большинства элементов Thrive Architect.

Когда вы редактируете страницу и выбираете элемент, вы можете найти эту опцию на левой боковой панели среди общих опций.

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

В качестве примера я буду использовать параметр «Стиль фона» для элемента «Фоновый раздел» .

Первое, что вам нужно сделать, это добавить элемент на вашу страницу.

Как и в случае любого элемента Thrive Architect, чтобы добавить его на свою страницу, щелкните значок «плюс» на правой боковой панели:

Затем выберите нужный элемент и перетащите его в нужное место. вы хотите, чтобы он был размещен на вашей странице.

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

Найдите раздел «Стиль фона» и, как только вы его найдете, щелкните по нему, чтобы открыть параметры, которые он включает:

Как вы можете видеть в открывшемся разделе, с помощью параметров «Стиль фона» вы можете добавить «Сплошной цвет», «Изображение», «Градиент», «Узор» или даже видео в качестве фона вашего элемента.

Вы можете выбрать типы слоев, нажав на значки рядом с опцией «Добавить слой». в этом варианте «Solid Color ” один. Это сделает ваш фон одним цветом, для которого вы можете изменить непрозрачность.

Щелкните значок «Сплошной цвет», чтобы открыть его:

Откроется всплывающее окно выбора цвета:

Вы можете выбрать цвет фона, вручную выбрав цвет с помощью средства выбора цвета или введя код HEX/RGB :

Вы также можете выбрать один из уже существующих цветов из разделов «Мои цвета » и «Цвета темы» .

Кроме того, вы можете установить прозрачность цвета. Непрозрачность по умолчанию установлена ​​на 100. Введите значение в поле рядом с «Непрозрачность» , чтобы изменить его:

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

Изображение

Вторым доступным типом слоя является «Изображение» , где вы можете загрузить собственное изображение, чтобы использовать его в качестве фона. Щелкните значок «Изображение», чтобы открыть параметры слоя:

Здесь вам нужно будет выбрать между «Статический» и «Динамический» тип изображения:

Статический

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

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

  • Отображение изображения

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

По умолчанию

откроется нижнее меню. Первый вариант — это «По умолчанию» один:

Выбор «По умолчанию» из раскрывающегося меню сохранит размер вашего изображения по умолчанию после вставки его в «Раздел фона»:

Когда вы выберете вариант «По умолчанию», это сообщение будет отображаться на вашем изображении, что позволит вам перетаскивать изображение, чтобы изменить его положение по своему усмотрению:

Обложка

Следующим способом отображения изображения является выбор «Обложка» в раскрывающемся списке «Отображение изображения». растягивание изображения. Если пропорции изображения отличаются от элемента, изображение будет обрезано либо по горизонтали, либо по вертикали, чтобы не было пустого места:

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

Содержать

Следующая опция «Отображение изображения» — это «Содержать» . Это поместит изображение и подгонит его по высоте к «Фоновому разделу»:

Чтобы использовать его, вернитесь в раскрывающееся меню и выберите третий элемент из списка:

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

Процент

Последний вариант, который вы можете выбрать из раскрывающегося меню, «Процент» , который позволяет вам выбрать точное процентное соотношение высоты и ширины изображения. Чтобы выбрать его, нажмите «Процент» в раскрывающемся меню:

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

«По умолчанию» и «Процент » поддерживают несколько других функций, которые доступны только при выборе одной из них. Вот как вы можете их использовать:

Повторить

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

Если щелкнуть в любом месте поля, откроется раскрывающееся меню:

Повторить по вертикали

Если выбрать «Повторить по вертикали» вариант, ваше изображение будет повторяться в пустом пространстве по вертикали в разделе «Фон», как показано ниже:

Повторить по горизонтали

У вас также есть возможность повторить изображение по горизонтали , таким образом, заполнив пустое по горизонтали пространство «Фонового раздела»:

Повторить оба

Последний элемент из выпадающий список «Повторить оба» . Это заполнит как пустое горизонтальное, так и вертикальное пространство из «Фонового раздела»:

Примечание: Как уже упоминалось, имейте в виду, что опция «Повторить» доступна только для «По умолчанию» и «Процент» Стили отображения изображения.

Ширина и высота

Вы также можете отрегулировать «Ширина» и «Высота» с помощью этих двух ползунков или вручную ввести процентное значение в поля рядом с ползунками:

Вы возможность перемещать изображение вверх-вниз или из стороны в сторону столько, сколько вам нужно.

  • Квадрат позиционирования

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

Квадрат содержит 9 точек. Вы можете щелкнуть по любому из них, чтобы разместить свою фотографию (в одном из углов/посередине вверху/посередине внизу и т. д. в разделе «Фон»).

Например, если я нажму в верхнем правом углу, изображение будет размещено, как показано ниже:

После того, как вы закончите с опцией «Повторить», у вас есть еще одна опция в разделе «Изображение», которая «Статическое фоновое изображение» , с флажком перед ним:

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

Динамическим будет только содержимое, а фон будет статическим. Это очень похоже на создание эффекта параллакса.

Динамический

Если вы выберете «Динамический», вы сможете добавлять динамические фоновые изображения в раздел фона:

  • Динамический источник источники:

    Избранное изображение

    Первый вариант позволит вам отобразить избранное изображение, которое вы настроили для этой страницы или публикации из панели администратора WordPress:

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

    Остальные доступные здесь параметры аналогичны параметрам, описанным для типа изображения «Статический».

    Изображение автора

    Затем вы можете выбрать «Изображение автора» в качестве источника:

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

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

    Изображение пользователя

    При выборе «Изображение пользователя» автоматически отобразится изображение пользователя, установленное в вашей учетной записи Gravatar:

    После его выбора вы можете перейти к настройке параметров «Отображение изображения», настроить позиционирование и т. д.

    Настраиваемое поле

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

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

    Эти статьи из нашей базы знаний проведут вас через все необходимые шаги для использования плагина Advanced Custom Fields, поэтому не стесняйтесь проверить его, если вы планируете использовать эту функцию «Custom fields» для своего стиля фона:

    • Как настроить настраиваемые поля с помощью подключаемого модуля Advanced Custom Fields

    • Как использовать поля, настроенные с помощью плагина расширенных настраиваемых полей в Thrive Architect

    • Как настроить определенные типы расширенных настраиваемых полей, необходимых для элементов Thrive Architect

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

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

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

    Затем вы можете продолжить и щелкнуть раскрывающийся список «Дополнительные параметры» . :

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

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

    Но вы также можете выбрать отображение изображения по умолчанию вместо этого:

    Если вы нажмете кнопку «Выбрать файл» , вы попадете в библиотеку мультимедиа, где вы сможете выбрать изображение по умолчанию:

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

    Это все способы настройки слоя «Изображение».

    Градиент

    Следующим доступным является слой «Градиент» . Чтобы выбрать его, нажмите на третий значок рядом с опцией «Добавить слой»:

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

    Ориентация

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

    Теперь выберите предпочтительный вариант (линейный или радиальный):

    Линейный

    Угол

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

    Под параметром «Угол» вы можете увидеть полосу. Эту полосу можно использовать для указания процента/соотношения цвета градиента, который вы хотите добавить в качестве слоя для «Фонового раздела». Процент относится к интенсивность , с которой цвет будет смешиваться с другим цветом (он же формирует градиент).

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

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

    Затем вы можете выбрать цвет градиента, используя палитру цветов, сохраненные цвета или вручную введя HEX/RGB код:

    Вы также можете установить непрозрачность , введя значение в специальное поле:

    Не забудьте нажать «Применить» , когда закончите:

    Радиальная

    Другим типом ориентации, который вы можете использовать для опции «Градиент», является «Радиальная» . Чтобы выбрать его, откройте раскрывающийся список рядом с опцией «Ориентация» и нажмите «Радиальная»:

    Кроме опции «Угол», которая в данном случае недоступна, вы можете настроить тип ориентации «Радиальная» с помощью те же параметры, что и для «Линейного» градиента, как объяснялось выше.

    Узор

    Далее в списке «Добавить слой» у вас есть возможность добавить «Узор» в качестве слоя фона.

    Выберите его, нажав на значок «Шаблон» рядом с опцией «Добавить слой»:

    Откроется раздел «Выбор шаблона» . Отсюда можно выбрать узор в качестве фона:

    Также можно задать его цвет, а также непрозрачность если нажать на поле рядом с «Цвет» option:

    Откроется всплывающее окно цвета, которое вы можете использовать так же, как и всплывающее окно любого другого цвета. Когда вы закончите, нажмите «Применить» .

    Фоновые эффекты

    Последний тип слоя, который вы можете добавить в раздел «Фон», — это «Эффекты слоя» .

    Если вы хотите выбрать его, щелкните последний значок рядом с опцией «Добавить слой»:

    Вы можете выбрать различные типы фоновых эффектов. Чтобы выбрать тип, нажмите на поле рядом с «Тип» вариант:

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

    Выберите цвет

    В следующей части раздела «Стиль фона» вы можете выбрать цвет в качестве фона. Если вы хотите сделать это, щелкните поле:

    Фоновое видео

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

    Далее, на следующем шаге, вам нужно будет выбрать тип элемента. Если на вашем веб-сайте настроены настраиваемые поля, то вам также будет доступна опция «Динамический», помимо «Статического»:

    В зависимости от того, что вы выберете здесь, источник видео также будет другим.

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

    Если вам нужно узнать больше о том, как загрузить видео из этих источников, вы можете найти информацию об этом в этой статье.0005

    Однако, если вы выберете тип элемента

    «Динамический» , вы можете выбрать из пользовательского динамического источника:

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

    Итак, после того, как вы выберете источник, в левой боковой панели появится набор «Дополнительные параметры»:

    Разверните этот раздел, и вы сможете выбрать, что произойдет, если элемент недоступен:

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

    В качестве альтернативы, если вы хотите, вы можете вместо этого отображать видео по умолчанию:

    Это видео можно выбрать, нажав кнопку «Выбрать файл», а затем просто загрузив файл из своей медиатеки:

    Вот способы, которыми вы можете настроить свой элемент «Фоновый раздел», используя параметр «Стиль фона» .

    Как упоминалось в начале статьи, эта опция доступна для различных элементов Thrive Architect. Для какого бы элемента вы ни решили настроить стиль фона, шаги будут точно такими же, как и в случае с разделом «Фон».

    No related posts.

Автор записи

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

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