Содержание

html — Помогите сделать прозрачность только одной картинки в блоке css

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

Вопрос задан

Изменён 3 года 8 месяцев назад

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

Добрый день! Есть блок в котором по средствам postion absolute накладываются картинки. Помогите сделать прозрачной только одну картинку. Я пробовал и так и сяк и всё ровно у меня становится прозрачным всё…

Присваивал ID и классы и ничего не выходит, не понимаю вообще как так то.

.browseBlock {
  position: relative;
  width: 300px;
  height: 300px;
}

.browseBlock img {
  width: 300px;
  height: 300px;
}

. ono {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}

.ono img {
  width: 100px;
  height: 100px;
}
<div>
  <div>
    <img src="http://logotipka.ru/images/stories/skachat_img/icons/icons4.jpg" title="" alt="">
  </div>

  <img src="http://logotipka.ru/images/stories/Skachat_new_year/new_year55.jpg" title="" alt="">

</div>
  • html
  • css
2 

body {
  background: #272727;
}

.browseBlock {
  position: relative;
  width: 300px;
  height: 300px;
}

.browseBlock>img {
  position: absolute;
  z-index: -1;
}

.ono {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}

.ono img {
  opacity: 0.5;
}
<div>
  <div>
    <img src="http://via. placeholder.com/300x300/ff9900/555555?text=Foto-1">
  </div>
  <img src="http://via.placeholder.com/100x100/33ff99/555555?text=Foto-2">
</div>

Если вы имеете ввиду, что прозрачным становится

 
<div>
    <img src="http://logotipka.ru/images/stories/skachat_img/icons/icons4.jpg" title="" alt="">
</div>

то добавьте в

.ono {z-index: 10;}

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

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Свойство css прозрачность — простой способ сделать дизайн сайта интереснее

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

Параметры задания прозрачности элементов

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


CSS: псевдоэлементы и псевдоклассы

Временами кажется, что для того, чтобы выжить в современном мире, необходимо знать, как создавать…

  • opacity;
  • filter;
  • PNG-изображение в качестве фона.

Значения свойства css «прозрачность» изменяются следующим образом: чем больше цифра, тем ниже уровень прозрачности элемента. В opacity она варьируется от 0 до 1, в filter — от 10 до 100. Причем последний используется для браузера Interet Explorer, а для всех остальных применяется свойство opacity.

Прозрачность изображения (изменяющаяся)

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

Рассмотрим, как задавать прозрачность картинки. CSS предлагает два варианта. Для этого необходимо прописать ее непосредственно в коде html-документа следующим образом:

      1. Указываем путь к изображению.
      2. Определяем параметры прозрачности при наведении курсора и нет. Для этого используем свойства onmouseover и onmouseout, в которых прописываем значения opacity и filter.

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


      CSS: цвет шрифта, стили, фон, размер

      Таблицы каскадных стилей простым, но эффективным языком позволяют описать сложный дизайн и изменять…

      Прозрачность текста и блоков страницы

      Что касается текста или блока (прозрачность div), css предлагает воспользоваться вариантом, аналогичным созданию прозрачности изображения, то есть использовать подключенный css-файл, в котором будут задаваться нужные параметры. Можно пойти и более простым путем. При задании стилей блока div style или текста p прописать следующий html-код для элементов onmouseover и onmouseout. Оба варианта работают и дают нужный результат.

      Прозрачность постоянная

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

      Для элемента css прозрачность будет задаваться следующим кодом. В блоке div style прописываем значения для background (например, #ff8800), opacity (н-р, 0.5), а также ширину (width) и отступ (padding).

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

      RGBA-метод

      Существуют и другие варианты использования данного свойства css: прозрачность можно применить к фоновому цвету какого-либо элемента дизайна. Для этого используется метод RGBA. Первые три буквы означают основные цвета (красный, целеный, синий), а последняя — alpha, которая и задает уровень прозрачности. Используя RGBA-формат, прописываем степень прозрачности, указывая ее в последней цифре. Например, так: background:rgba(240,2,33,0.4035).

      Заключение

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

      Как изменить непрозрачность фонового изображения в CSS

      Обзор

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

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

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

      Предварительные требования

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

      Знакомство с непрозрачностью

      Непрозрачность относится к прозрачности элемента. Когда непрозрачность применяется к элементу, она также применяется к содержимому. Благодаря этому дочерние элементы имеют такую ​​же непрозрачность, как и их родительские элементы.

      Фоновое изображение непрозрачность CSS принимает значение от 0 до 1. Также может принимать процентное значение от 0 до 100%. Значение 0 определяет полную прозрачность элемента, а 1 определяет полную непрозрачность.

      Синтаксис:

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

      Знакомство с положением: относительным и положением: абсолютным

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

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

      Синтаксис:

      Для Image Opacity важны для понимания относительные и абсолютные положения. давайте посмотрим, что означают эти две позиции.

      Относительное положение :

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

      Чтобы расположить элемент относительно, установите position: relative;. Затем вы можете использовать свойства верхнего, нижнего, левого или правого положения, чтобы относительно расположить элемент по своему вкусу.

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

      Абсолютная позиция :

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

      Чтобы установить абсолютное положение вашего элемента, установите position: absolute;. Здесь вы также можете использовать верхние, нижние, левые или правые свойства для позиционирования элемента.

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

      Знакомство со стекированием и z-индексом

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

      Давайте разберемся со стекированием на примере. Допустим, вы создали HTML-элемент div, содержащий определенный текст. Затем вы создали еще один div с фоновым изображением и поместили его поверх текстового div, после чего пользователь увидит только div с фоновым изображением. Это потому, что он присутствует на вершине стека.

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

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

      Например, если у вас есть два элемента с z-индексом 1 и 2 соответственно, HTML-элемент с z-индексом появится над элементом с z-индексом 1.

      Синтаксис:

      Знакомство с псевдоэлементами ::before и ::after

      ::after

      ::after в CSS обычно используется для создания псевдоэлемента. Псевдоэлемент создается как последний дочерний элемент элемента, к которому вы применяете класс ::after. Обычно он используется для добавления дополнительных свойств CSS к элементам.

      ::before

      ::before в CSS похож на ::after. Основное различие между ключевыми словами «до» и «после» заключается в том, что ключевое слово «после» создает псевдоэлемент в качестве первого дочернего элемента.

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

      Способ 1. Использование отдельного элемента изображения и позиционирования для изменения непрозрачности фонового изображения CSS

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

      Мы пытаемся воссоздать приведенное ниже изображение в HTML и CSS.

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

      Легко, не правда ли? Теперь давайте рассмотрим еще один метод, с помощью которого вы можете настроить непрозрачность фонового изображения в CSS.

      Метод: 2 — Использование псевдоэлементов CSS для изменения прозрачности фонового изображения CSS

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

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

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

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

      Главный минус в том, что если так сделать, то все дочерние элементы наследуют свойства position и opacity. Чтобы объяснить это, мы воссоздали второй метод, но вместо того, чтобы использовать псевдоэлементы, мы сделали все в родительском элементе.

      Теперь посмотрим на вывод:

      Вы должны заметить разницу между выводом метода 2 и приведенным выше выводом. Текст прозрачен, потому что класс содержимого наследует значение непрозрачности от родительского элемента.

      Решение. Поместите фоновое изображение в псевдоэлемент родительского элемента

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

      Добавить наложение с уменьшенной непрозрачностью и цветом фона поверх фонового изображения

      Существует также альтернативное решение для изменения прозрачности фонового изображения в CSS. Вместо изменения непрозрачности и вставки изображения в псевдоэлемент вы можете вставить фоновое изображение в родительский класс. Затем вы можете использовать псевдоэлемент, чтобы установить прозрачный цвет фона, используя значение rgba. Альфа-значение будет находиться в диапазоне от 0 до 1, где 0 означает прозрачность, а 1 — непрозрачность.

      Вывод приведенного выше кода будет следующим:

      Изображение выше очень похоже на изображения, отображаемые в методах 1 и 2.

      Заключение

      • Фоновое изображение 90 базовое фоновое изображение в элементе.
      • Непрозрачность Ключевое слово используется для изменения прозрачности фонового изображения в CSS. Требуется значение от 0 до 1.
      • Цвет фона 9Свойство 0006 также используется для изменения прозрачности.
      • Альфа-значение управляет непрозрачностью в свойстве background-color. Требуется значение от 0 до 1.
      • Псевдоэлементы могут быть созданы для изменения непрозрачности фонового изображения в CSS.
      • Псевдоэлементы не позволяют дочерним элементам наследовать свойства непрозрачности от родительских элементов.

      Непрозрачность CSS3 | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т.

      д. Могу ли я использовать

      Поиск ?

      Непрозрачность CSS3

      — РЕК

      • Глобальное использование
        98,33% + 0,03% «=» 98,36%

      Метод установки уровня прозрачности элемента

      Chrome
      1. 4 — 113: Поддерживается
      2. 114: Поддерживается
      3. 115 — 117: Поддерживается
      Edge
      1. 12–113: поддерживается
      2. 114: поддерживается
      Safari
      1. 3.1–16.4: поддерживается
      2. 16.5: Поддерживается
      3. 16.6 — TP: Поддерживается
      Firefox
      1. 25% — Supported»> 2 — 112: Поддерживается
      2. 113: Поддерживается
      3. 114–115: Поддерживается
      Opera
      1. 9–98: Поддерживается
      2. 99: Поддерживается
        3. 9 0210
        IE
        1. 5,5 — 8: Частичная поддержка
        2. 9–10: поддерживается
        3. 11: поддерживается
        Chrome для Android
        1. 114: поддерживается
        Safari на iOS
          9026 6 3.2–16.4: Поддерживается
        1. 16.5: Поддерживается
        2. 17: Поддерживается
        Samsung Internet
        1. 18% — Supported»> 4–20: Поддерживается
        2. 21: Поддерживается
        Opera Mini
        1. все: Поддерживается
        Opera Mobile
        1. 10–12.1: поддерживается
        2. 73: Поддерживается
        Браузер UC для Android
        1. 13.4: Поддерживается
        Браузер Android
        1. 2.1–4.4.4: Поддерживается
        2. 113: поддерживается
        Firefox для Android
        1. 113: поддерживается
        Браузер QQ
        1. 13.1: Поддерживается
        Браузер Baidu
        1. 13.

          No related posts.