Прозрачный фон на css: background
Вы можете часто увидеть на сайтах прозрачный фон, к примеру есть красный фон страницы, а за фоном стоит простая картинка. Так вот в CSS есть замечательные способы создания прозрачности, рассмотрим основные.
1. Через свойство opacity
Способ не совсем правильный, но он будет отображаться во всех браузерах корректно.
Рассмотрим на примере двух блоков, у одного фон картинка, а у другого фон красный и с прозрачностью.
div < width: 300px; height: 300px; position: absolute; top: 0px; left: 0px; >#block1 < backgroun-image('image/image1.jpg'); >#block2 < backround-color: red; opacity: 0.7; // прозрачность >
Прозрачность измеряется в от 0 до 1. Естественно ноль — это полная прозрачность.
2. background-color: RGBA
Здесь тоже самое, только в одном свойстве мы указываем и цвет, и прозрачность.
background-color: rgba(0, 125, 215, 0.7);
Это современный подход, более простой, но не всех браузер отображается корректно.
Как убрать белый фон у картинки?
Отправлено 20 Апрель 2011 — 09:19
Вот у меня есть картинка, можно ли сделать в html что бы картинка отображалась без белого фона?
И как это сделать? И что бы эта картинка лежала на фоне сайта а не на белом фоне
На сайте koloks.ru внизу эта картинка есть и там заметно что картинка лежит на белом фоне а не на фоне сайта и изо этого картинка отображается плохо
Сообщение отредактировал stanislay007: 20 Апрель 2011 — 09:21
На правах рекламы
Вместо прозрачности, белый фон
И как я понимаю строка «background-color: whitesmoke;» отвечает за цвет.. Но когда ставлю колор «transparent» все равно фон белый.. Подскажите ребят, как исправить.
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
reCAPTCHA убрать белый фон
Собственно. Как перекрасить фон? Или вообще его убрать. Что-то у меня не получилось переоформить.
Как сделать белый фон прозрачно стеклянным
Добрый день. Есть форма для авторизации как на скриншоте. Как сделать белый фон прозрачно.
Белый цвет закрывает фон за инпутом при использовании стиля boostrap
таблица форм входа находится по центру, задан фон страницы, но почему-то, фон перекрывается белым.
269 / 261 / 35
Регистрация: 21.02.2012
Сообщений: 1,078
ну так а если этому page-header и прописать фон ваш png? нет?
Регистрация: 25.01.2014
Сообщений: 10
maximus2011, Подскажи как, я не разбираюсь в ксс..
269 / 261 / 35
Регистрация: 21.02.2012
Сообщений: 1,078
1 2 3 4 5 6 7
.page-header { display: none; background:url(..тут путь до картинки) no-repeat scroll; padding: 0 0 10px 0; margin: -20px 0 0 -20px; border-bottom: 1px solid #ddd; }
правда там у вас display:none; стоит, а это значит, что блок не видим. Нужно либо убрать это свойство, либо написать display:block; вместо него
Администратор
11995 / 5332 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
VitaliyK, значит, у кого-то еще ниже тоже белый фон) Ройте дальше.
Регистрация: 25.01.2014
Сообщений: 10
maximus2011, Taatshi, none я убрал, просто забыл удалить когда копировал сюда, сделал все как ты написал не помогло, вот что выходит.
Добавлено через 42 секунды
Taatshi, Так ниже идет фон сайта, т.к. картинка.. куда еще ниже?
Администратор
11995 / 5332 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
VitaliyK, дайте ссылку на сайт
И нарисуйте как хотите чтобы было. Я что-то перестаю Вас понимать.
Добавлено через 1 минуту
Все, поняла.
Вам нужно вынести шапку за контейнер с остальной частью сайта. Вы не сможете сделать прозрачный фон для ЧАСТИ контейнера.
Дайте полный код html и css
Регистрация: 25.01.2014
Сообщений: 10
Taatshi, Можно ваш скайп или что либо, я обьясню в чем соль, и дам сайт.
Администратор
11995 / 5332 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
VitaliyK, нельзя — все вопросы решаем на форуме
Регистрация: 25.01.2014
Сообщений: 10
Taatshi, Ладно, сайт http://vitaliyk.rentshop.org/ (Не реклама)
Суть в том что, магазин арендуется, и полностью css и html я менять не могу..
Единственное место где я могу вносить данные это «Поле для скриптов(данные пойдут после )»
Администратор
11995 / 5332 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
Сообщение от VitaliyK 
магазин арендуется, и полностью css и html я менять не могу
Боюсь, тогда Ваша задача нерешаема. Тут нужно переверстывать страницу.
Регистрация: 25.01.2014
Сообщений: 10
Taatshi, Почему, ведь можно поверх старого css, новые коды ставить.
Т.е. можно ведь как то фон прозрачным для всей страницы сделать.
Администратор
11995 / 5332 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
VitaliyK, попробуйте
.content и .page-header бэк задаем transparent
.row бэк задаем white
Регистрация: 25.01.2014
Сообщений: 10
Не могли бы вы написать код, а я уж подстрою куда надо :3 Я не силен в ксс :С
Добавлено через 6 минут
Taatshi, Вроде сделал, не помогло :С
Ладно что уж.. Не получится так не получится :С
Администратор
11995 / 5332 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
.content, .page-header {background-color: transparent;} .row {background-color: whitesmoke;}
Добавлено через 1 минуту
Не может не помочь. У меня получилось. Не поможет — напишите так
.content, .page-header {background-color: transparent!important;} .row {background-color: whitesmoke!important;}
Регистрация: 25.01.2014
Сообщений: 10
Taatshi, У нас не получится. Ибо отдельный блок(с товаром) мы оставить отдельно белым не можем, а когда делаешь все прозрачным, это выглядит не очень хорошо..
Добавлено через 1 минуту
Taatshi, За прозрачность под шапкой отвечает row, а когда делаем его прозрачным, то прозрачным становится весь сайт.
Добавлено через 2 минуты
Taatshi, зайдите на сайт, посмотрите как выглядит когда все прозрачное :С
Администратор
11995 / 5332 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
У меня получилось
Регистрация: 25.01.2014
Сообщений: 10
Taatshi, Добавьте меня в icq, я вас добавил, мой id 472139
Добавлено через 54 секунды
Taatshi, А у меня почему то, так не получается.
Администратор
11995 / 5332 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
.content, .page-header {background-color: transparent!important;} .row {background-color: whitesmoke;}
Регистрация: 25.01.2014
Сообщений: 10
Taatshi, Скиньте тогда пожалуйста, полный код страницы.
Добавлено через 44 секунды
Taatshi, ОГРОМНОЕ СПАСИБО, получилось :3
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Полупрозрачный фон, вместо цвета
Не могу сделать полупрозрачный фон в форме авторизации и поиска. Панель у меня как на кинопоиск.
Замена прозрачности в png на белый фон
Вся суть в заголовке. Нужно во время загрузки изображения заливать все прозрачные места белым.
imagecreatefrompng и замена прозрачности на белый фон
$im = imagecreatefrompng(‘../images/buttons/item.png’); imagepng($im); Заменяет прозрачность.
При повроте изображения, вместо прозрачности — чёрный фон [imagerotate();]
Пробовал imagecolortransparent() — она много черного вырезает — не только то что по краям, но и на.
Как убрать задний фон на изображении?
У меня такой вопрос как можно убрать прозрачный фон на изображение.Пожалуйста помогите, я пытался через photoshop но это слишком долго там таких примерно 1000.
- Вопрос задан более трёх лет назад
- 1315 просмотров
10 комментариев
Простой 10 комментариев
Тигран Абрамян @TAbrahamyan