Как сделать прозрачным только фон без текста css

Как сделать цвет фона div прозрачным в CSS

Я не использую CSS3. Поэтому я не могу использовать opacity или filter атрибуты. Без использования этих атрибутов, как я могу сделать background-color прозрачным из div ? Это должно быть своего рода пример текстового поля в этой ссылке . Здесь цвет фона текстового поля прозрачен. Я хочу сделать то же самое, но без использования вышеупомянутых атрибутов.

Непрозрачность дает вам прозрачность или прозрачность. Смотрите пример Fiddle здесь .

Проблема в opacity том, что это также повлияет на контент, когда вы часто этого не хотите.

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

Но если вы хотите, чтобы он был в цветах, вы можете использовать:

Или определить фоновое изображение ( 1px по 1px ), сохраненное с правом alpha .
(Для этого используйте Gimp , Paint.Net или любое другое программное обеспечение изображение , которое позволяет вам сделать это.
Просто создайте новый файл, удалить фон и положить полупрозрачный цвет в нем, а затем сохранить его в формате PNG.)

По словам Рене , самое лучшее , что нужно сделать будет смешивать оба с rgba первого и 1px по 1px изображению в качестве запасного варианта , если браузер не поддерживает альфа:

CSS непрозрачность только для цвета фона, а не для текста на нем?

Можно ли присвоить свойство opacity только свойству background объекта div , а не тексту на нем?

но это не меняет непрозрачности.

11 ответов

У меня есть <div> , прозрачность которого его фоновый цвет (а не его содержимое) Мне бы хотелось переодеться. Пульт дистанционного управления API посылает мне этот цвет: #abcdef и я говорю jQuery (1.9) применить этот цвет через .css : $(‘div’).css(‘background-color’, ‘#abcdef’);.

Похоже, вы хотите использовать прозрачный фон, и в этом случае вы можете попробовать использовать функцию rgba() :

rgba(R, G, B, A)

R (красный), G (зеленый) и B (синий) могут быть либо <integer> s, либо <percentage> s, где число 255 соответствует 100%. A (альфа) может быть <number> между 0 и 1, или <percentage> , где число 1 соответствует 100% (полная непрозрачность).

RGBa пример

Небольшой пример , показывающий, как можно использовать rgba .

По состоянию на 2018 год практически каждый браузер поддерживает синтаксис rgba .

Самый простой способ сделать это-использовать 2 дива, 1 с фоном и 1 с текстом:

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

Если вам не нравится устанавливать цвета с помощью RGBA, а скорее с помощью HEX, есть решения.

Вы могли бы использовать такую смесь, как:

И использовать его, как:

На самом деле это то, что встроенная функция Less также обеспечивает:

Существует ли стандартный способ CSS установки 2 цветов для текста ? Цвет переднего плана и фон, который находится прямо под цветом переднего плана, но немного правее, так что вы действительно можете сказать, что есть цвет фона за цветом переднего плана? Кинф похож на приведенное ниже изображение.

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

Это будет работать с каждым браузером

Если вы не хотите, чтобы прозрачность влияла на весь контейнер и его дочерние элементы, проверьте этот обходной путь. Для этого у вас должен быть абсолютно позиционированный ребенок с относительно позиционированным родителем. CSS Непрозрачность, Которая Не Влияет На Дочерние Элементы

Мой трюк состоит в том, чтобы создать прозрачный .png с цветом и использовать background:url() .

У меня была та же проблема. Мне нужен прозрачный цвет фона 100%. Просто используйте этот код; он отлично сработал для меня:

Вы можете увидеть примеры в левой части этой веб-страницы (область контактной формы).

Отличный способ сделать это — действительно использовать CSS 3.

Создайте div-класс — например, суперсизер в верхней части страницы:

Затем установите следующие свойства CSS:

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

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

Самое простое решение-создать 3 divs . Один, который будет содержать другие 2, один с прозрачным фоном и один с содержимым. Сделайте положение первого div относительным и установите для параметра с прозрачным фоном значение минус z-index , затем отрегулируйте положение содержимого так, чтобы оно соответствовало прозрачному фону. Таким образом, у вас не будет проблем с абсолютным позиционированием.

Этот метод будет работать во всех браузерах.

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

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

  1. Создайте два разных дива. Они будут братьями и сестрами, не содержащимися друг в друге или чем-то еще.
  2. Дайте text div сплошной цвет фона, потому что это будет по умолчанию JavaScript-менее.
  3. Используйте jQuery, чтобы получить высоту text div, и примените ее к background div.

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

Похожие вопросы:

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

Возможный Дубликат : Непрозрачность фона, но не текста У меня есть неупорядоченный список HTML. Мне нужно, чтобы фон имел непрозрачность 0.3. Но я не хочу, чтобы эта непрозрачность применялась к.

В следующем коде я хочу установить непрозрачность только для цвета фона li (а не текста). Однако важно NOT использовать rgba в качестве фона. Я пытаюсь следовать, но он также устанавливает.

У меня есть <div> , прозрачность которого его фоновый цвет (а не его содержимое) Мне бы хотелось переодеться. Пульт дистанционного управления API посылает мне этот цвет: #abcdef и я говорю.

как мне сделать так, чтобы я уменьшал непрозрачность только для цвета BG, а не для содержимого и не для границы. css : .ghost-btn-small < text-decoration: none; text-align: center; margin: 320px.

Существует ли стандартный способ CSS установки 2 цветов для текста ? Цвет переднего плана и фон, который находится прямо под цветом переднего плана, но немного правее, так что вы действительно.

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

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

Как указать непрозрачность background-color без изменения существующего цвета фона? Например, рассмотрим: div < width: 100px; height: 100px; >.blue < background-color: blue; >.green <.

Я хотел бы добавить затемненный цвет фона к моим кнопкам, когда кто-то нависает над ними. Моя проблема заключается в том, что кнопки имеют background-color: transparent по умолчанию (когда они не.

Как создать прозрачный фон в Paint

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

Команда контент-менеджеров wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества.

Количество просмотров этой статьи: 49 955.

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

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

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