png белый фон html
Убираю фон в картинке на прозрачный. сохраняю картинку в формате png, но при отображении на странице все равно в местах где фона не было появляется белый фон. в чем дело? использую bootstrap 3
.center-block
Отслеживать
Антон Бурак
задан 14 мар 2017 в 7:01
Антон Бурак Антон Бурак
445 3 3 серебряных знака 15 15 бронзовых знаков
а как по картинке можно что-то понять? Добавьте код, картинку
14 мар 2017 в 7:03
картинку нормальным редактором сохрани в .png) прозрачности значит нет
14 мар 2017 в 7:05
@Elena, добавил и код и картинку
14 мар 2017 в 7:05
вы пробовали обновить страницу без кэширования? может просто вы сначала подключали изображение в формате jpg, а потом поменяли на png и сейчас выводится старая картинка(jpg)
14 мар 2017 в 7:05
а у класса center-block случайно фон белый не прописан в css?
Как сделать задний фон картинки прозрачным html?
>
#pc display: none;
>
#mobile display: inline-block;
>
>
.header border: none;
border-bottom: 2px solid white;
position: fixed;
width: 100%;
height: 10%;
right: 0;
top: 0;
background: #34e89e; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #0f3443, #34e89e); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0f3443, #34e89e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
>
.content position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 90%;
background: #C33764; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1D2671, #C33764); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1D2671, #C33764); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
>
media screen and (orientation : landscape) #pc display: inline-block;
>
#mobile display: none;
>
.header border: none;
border-bottom: 2px solid white;
>
.header__text position: fixed;
margin-left: 10px;
>
>
.header__text position: fixed;
top: 0;
width: 100%;
height: 100%;
>
media screen and (orientation: landscape) .simple margin-top: 0.5%;
margin-left: 6%;
>
.pop margin-top: 0.5%;
margin-left: 4%;
float: left;
>
>
media screen and (orientation: portrait) .simple position: absolute;
margin-top: 3%;
margin-left: 10%;
>
.pop margin-top: 3%;
margin-left: 4%;
float: left;
>
>
.simple,.pop border-radius: 5px;
border: 2px solid white;
>.about background: #C33764; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1D2671, #C33764); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1D2671, #C33764); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
>
body background: #C33764; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1D2671, #C33764); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1D2671, #C33764); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
>
- Вопрос задан более двух лет назад
- 2267 просмотров
Как вставить картинку с прозрачным фоном в html ?
Как вставить картинку с прозрачным фоном в html? Прозрачный фон заменяется белым.
Лучший ответ
значит, она скорее всего не такая и прозрачная.
Остальные ответы
код скиньте как вы вставили
DEN_sЗнаток (277) 8 лет назад
#hand<
background-image:url(images/hand.png);
background-repeat:no-repeat;
width:auto;
height:auto;
>
VortexWeb.net Мыслитель (6142) Тут все в порядке, значит картинка не прозрачная сам фон.
Ну смотрите — фон браузера по умолчанию всегда белый и даже если вы вставите прозрачное png — то один фиг будет белое, под ним будет белый фон и соответственно через прозрачное будет пробивать белое, стекло не получится сделать — если только с помощью photoshop но так что бы края были отчётливо видны
в фотошопе сделать прозрачной, а затем в html напишите теги
Картинка в формате png?
background-image
Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет. В CSS3 допустимо указывать несколько фоновых изображений, перечисляя их параметры через запятую.
Синтаксис
background-image: url(путь к файлу) | none | inheritbackground-image: url(путь к файлу) | none[, url(путь к файлу) | none]*Значения
url В качестве значения используется путь к графическому файлу, который указывается внутри конструкции url() . Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них. none Отменяет фоновое изображение для элемента. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
background-image .
Объектная модель
[window.]document.getElementById(» elementID «).style.backgroundImage
Браузеры
Internet Explorer до версии 7.0 включительно применяет фон к внутренней части границы элемента, у которого установлено свойство hasLayout . Если у элемента нет hasLayout , свойство background-image будет учитывать границы элемента, как это и задано в спецификации. Разница в отображении будет заметна, если границы пунктирные ( dashed или dotted ), а не сплошные.
Если для элемента значение overflow установлено как scroll или auto , в Internet Explorer 8 будет вертикальная задержка в один пиксел при прокрутке фона.
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
HTML5 CSS2.1 IE Cr Op Sa Fx
Фон для TR 1 2 3
Результат данного примера в браузере Chrome показан на рис. 1. Браузер Internet Explorer, Opera и Firefox корректно отображают фон для строки (рис. 2).
Рис. 1. Повторение фона для каждой ячейки
Рис. 2. Фон для всей строки