Background style div: CSS background-image property

Разное 

HTML / CSS: Упражнение , , css background-color. Урок 13. Онлайн курсы

  • index.html

<!DOCTYPE html> <html lang=»ru»> <head> <meta charset=»UTF-8″> <title>Урок HTML разметки 3</title> </head> <body> <div> <h3>Урок HTML разметки</h3> <p>300 тысяч фунтов стерлингов было потрачено британскими учеными на изучение взаимодействия уток с водой. В результате длительного исследования им удалось выяснить, что всем остальным способам провести время в воде утки предпочитают дождь, который заменяет им душ.</p> <p>Еще одно шокирующее открытие исследователей с Туманного Альбиона наконец объяснило страдающим от избыточного веса, в чем заключается их проблема. В ходе научного эксперимента британским ученым удалось установить, что худые люди, как правило, едят меньше, чем полные. </p> </div> <div> <h3>Урок HTML разметки</h3> <p>300 тысяч фунтов стерлингов было потрачено британскими учеными на изучение взаимодействия уток с водой. В результате длительного исследования им удалось выяснить, что всем остальным способам провести время в воде утки предпочитают дождь, который заменяет им душ.</p> <p>Еще одно шокирующее открытие исследователей с Туманного Альбиона наконец объяснило страдающим от избыточного веса, в чем заключается их проблема. В ходе научного эксперимента британским ученым удалось установить, что худые люди, как правило, едят меньше, чем полные.</p> </div> <style type=»text/css»> .block-1 { background-color: red; } .block-2 { background-color: green; } </style> </body> </html><!DOCTYPE html> <html lang=»ru»> <head> <meta charset=»UTF-8″> <title>Урок HTML разметки 3</title> </head> <body> <div> <h3>Урок HTML разметки</h3> <p>300 тысяч фунтов стерлингов было потрачено британскими учеными на изучение взаимодействия уток с водой.

В результате длительного исследования им удалось выяснить, что всем остальным способам провести время в воде утки предпочитают дождь, который заменяет им душ.</p> <p>Еще одно шокирующее открытие исследователей с Туманного Альбиона наконец объяснило страдающим от избыточного веса, в чем заключается их проблема. В ходе научного эксперимента британским ученым удалось установить, что худые люди, как правило, едят меньше, чем полные.</p> </div> <div> <h3>Урок HTML разметки</h3> <p>300 тысяч фунтов стерлингов было потрачено британскими учеными на изучение взаимодействия уток с водой. В результате длительного исследования им удалось выяснить, что всем остальным способам провести время в воде утки предпочитают дождь, который заменяет им душ.</p> <p>Еще одно шокирующее открытие исследователей с Туманного Альбиона наконец объяснило страдающим от избыточного веса, в чем заключается их проблема.
В ходе научного эксперимента британским ученым удалось установить, что худые люди, как правило, едят меньше, чем полные.</p> </div> <style type=»text/css»> .block-1 { background-color: red; } .block-2 { background-color: green; } </style> </body> </html>

css — Как стилизовать div, чтобы цвет фона был для всей ширины содержимого, а не только для ширины дисплея?

Задавать вопрос

спросил

Изменено 11 лет, 4 месяца назад

Просмотрено 197к раз

У меня есть HTML-страница, которая ради этого вопроса выглядит так:

 
<голова>
<стиль>
div { ширина: 100%; }
.
 
 success {цвет фона: #ccffcc; }


<тело>
<дел>
Очень длинная очередь. Это очень длинная очередь. Это очень длинная очередь. Это очень длинная очередь. Это очень длинная очередь. Это очень длинная очередь. Это очень длинная очередь. Это очень длинная очередь. Это очень длинная очередь. Это очень длинная очередь. Это очень длинная очередь. Это очень длинная очередь. Это очень длинная очередь. Это очень длинная очередь. Это очень длинная очередь. Это очень длинная очередь. Это очень длинная очередь. Это очень длинная очередь.

Обратите внимание на «очень длинную строку» и цвет фона этого блока.

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

В основном я хочу, чтобы мой div вел себя так:

  1. Чтобы иметь указанный цвет фона
  2. Минимум иметь ту же ширину, что и экран, даже если текст внутри состоит всего из нескольких слов
  3. Следить за шириной текста, если она больше ширины экрана
  4. Необязательно (и я знаю, что это действительно другой, дополнительный вопрос), если у меня есть более одного такого div, следующего за первым, есть ли способ, чтобы два автоматически следовали ширине самого широкого div?

Есть ли в этом смысл?

Есть ли способ сделать это?

Здесь я создал тестовую страницу, которая, если вы просматриваете ее на iPhone, несмотря на мелкий шрифт, показывает проблему: http://www. vkarlsen.no/test/test.html

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

  • Фон iPad для блоков div не охватывает всю ширину экрана

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

  • Цвет фона распространяется по всей ширине ul

    <дел> уже являются элементами блока

  • WebKit не рисует фоновый цвет по всей ширине конечного встроенного элемента списка

    Попытка настроить div на отображение : встроенный блок; но это ничего не изменило

  • css
  • html
  • цвет фона
4

черная магия:

 <стиль>
тело { поплавок: влево;}
.success {цвет фона: #ccffcc;}

Если у кого-то есть четкое объяснение, почему это работает, пожалуйста, прокомментируйте.

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

2

Проблема, похоже, в том, что элементы блока масштабируются только до 100% содержащего их элемента, независимо от того, насколько велик их контент — он просто переполняется. Однако, делая их встроенными блоками 9Элементы 0047, по-видимому, изменяют свою ширину в соответствии с их фактическим содержимым.

HTML:

 

    <дел>
        фуооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо
    

    <дел>
 

        бар

CSS:

 .wide { min-width: 100%; отображение: встроенный блок; цвет фона: желтый; }
#container { дисплей: встроенный блок; }

(Элемент container отвечает на ваш дополнительный вопрос, чтобы сделать второй div такой же большой, как и предыдущий, а не только ширина экрана. )

Я также настроил скрипт JS, показывающий мой демонстрационный код.

Если вы столкнетесь с какими-либо проблемами (особенно с кросс-браузерными проблемами) с inline-block , посмотрите на элементы уровня блока в display: inline-block может помочь.

1

 .success {цвет фона: #cffccc; переполнение: прокрутка; минимальная ширина: 100%; }

Вы можете попробовать свиток или авто .

2

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

 div { display: inline-block; пробел: nowrap; }
.success {цвет фона: #ccffcc; }

Измените таблицу стилей, удалите тегов из вашего источника и попробуйте. Обратите внимание, что

display: inline-block работает не во всех браузерах, хотя проблема возникает только в старых браузерах (более новые версии должны до некоторой степени поддерживать это). Мое личное мнение — игнорировать кодирование для сломанных браузеров. Если ваш код соответствует стандартам, он должен работать во всех основных современных браузерах. Любой, кто все еще использует IE6 (или более раннюю версию), заслуживает боли. 🙂

Это потому что вы поставили ширина: 100% , которая по определению охватывает только ширину экрана. Вы хотите установить min-width:100% , который устанавливает его на ширину экрана... с возможностью его увеличения.

Также убедитесь, что вы установили min-width:100% для body и html .

1

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

Чтобы сохранить минимальную ширину: min-width:100%

Попробуйте это,

 .success { background-color: #ccffcc; плыть налево;}

или попробуйте это,

 .success { background-color: #ccffcc; переполнение:авто;}

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

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

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

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

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

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

Обязательно, но не отображается

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

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

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

Использование ngStyle в Angular для динамического стиля

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

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

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

В отличие от других библиотек или фреймворков, таких как React, при объявлении фактического свойства и значения CSS не используется специальный синтаксис, что, безусловно, значительно упрощает создание динамических встроенных стилей с помощью Angular.

💎 Важно: атрибут — это имя ключа HTML, который вы хотите создать, например <дел> . Свойство — это эквивалент JavaScript, созданный за кулисами, когда браузер загружает наше приложение. Поэтому, когда мы используем element.style , мы имеем дело со свойством, а не с атрибутом.

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

Привязка атрибута стиля

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

 <дел>
  ...

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

Здесь на помощь приходит привязка свойства к атрибуту стиля .0046 атрибут стиля . Используя [стиль] , мы ссылаемся на атрибут, но поскольку мы применяем привязку с помощью квадратных скобок, она становится привязкой свойства.

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

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

 

  ...

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

 

  . ..

Приведенное выше проверяет наличие свойства item.promo в шаблоне, и если true, то отобразит для нас встроенные стили, иначе — нет.

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

 <дел
  [style.background]="item.promo ? '#f4f4f4' : '#fff'"
  [style.border]="item.promo ? '1px сплошная #dcdcdc' : '1px сплошная #fff'">
  ...

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

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

 @Компонент({
  шаблон: `
    

      ...
    

  `
})
класс экспорта MenuItemComponent {
  Элемент @Input(): Элемент;
  конструктор () {}
  получитьпромостили() {
    если (этот.элемент.промо) {
      вернуть фон: #f4f4f4; граница: 1px сплошная #dcdcdc';
    }
  }
}

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

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

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

 

  ...

Этот метод был бы полезен для ссылки на строгие значения чисел , которые, возможно, возвращаются из запроса API, поэтому вам не нужно анализировать его из строки в число — привязка стиля продумана для обработки множества вариантов использования и синтаксиса. .

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

И последнее, что касается привязки в стиле , — это возможность передачи конфигурации объекта. Давайте изменим наш предыдущий пример на использование объекта вместо строки:

 @Компонент({
  шаблон: `
    

      . ..
    

  `
})
класс экспорта MenuItemComponent {
  Элемент @Input(): Элемент;
  конструктор () {}
  получитьпромостили() {
    если (этот.элемент.промо) {
      возвращаться {
        фон: '#f4f4f4',
        граница: '1px сплошная #dcdcdc'
      };
    }
  }
}

Конечно, это означает, что вы также можете использовать объект в шаблоне и не использовать метод компонента, если хотите.

У вас есть два варианта: передать объект целиком и переключить значения (не рекомендуется) или передать объект динамически, используя тернарный или условный код:

 
<дел
  [стиль]="{
    фон: item.promo ? '#f4f4f4' : '#fff',
    граница: item.promo ? '1px сплошной #dcdcdc': '1px сплошной #fff'
  }">
  ...

Я бы не стал использовать описанный выше метод, так как он снова включает в себя создание повторяющегося кода и откатов — это лучший вариант для вас, когда объект передается только в случае необходимости и передается null , чтобы ничего не отображалось, если условие приводит к результату false :

 
<дел
  [стиль]="item. promo ? {
    фон: '#f4f4f4',
    граница: '1px сплошная #dcdcdc'
  }: ноль">
  ...

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

 

  ...

А как насчет ngStyle? Что интересно, сейчас он вам не нужен…

Да, вы правильно прочитали — он вам больше не нужен.

Все, что может сделать ngStyle, привязка стиля может сделать лучше.

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

Директива NgStyle

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

Во-первых, если вы используете автономные компоненты, вам необходимо импортировать директиву NgStyle и добавить ее в импорт : [] массив в декораторе @Component :

 @Компонент({
  автономный: правда,
  импортирует: [NgStyle],
  шаблон: `
    

      . ..
    

  `
})
класс экспорта MenuItemComponent {
  Элемент @Input(): Элемент;
  конструктор () {}
  получитьпромостили() {
    если (этот.элемент.промо) {
      возвращаться {
        фон: '#f4f4f4',
        граница: '1px сплошная #dcdcdc'
      };
    }
  }
}

Конечно, это означает, что вы можете использовать ngStyle в шаблоне таким же образом:

 

  ...

Это все, что может предложить директива ngStyle, синтаксис литерала объекта для передачи динамического стиля. Он не поддерживает строки или одиночные значения, что делает его менее мощным, чем привязка в стиле .

Имея это в виду, мы рассмотрели, как добавлять динамические стили в шаблон Angular, более того, вы также можете добавлять эти стили к компонентам, и они не ограничиваются только элементами DOM, такими как

.

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

No related posts.

Автор записи

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

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