[RESOLVIDO] Deixar imagem Transparente

tapes
Autor do Tópico
Offline
JCB! Senior

Mais

15 anos 6 meses atrás #29391 por tapes

tapes created the topic: [RESOLVIDO] Deixar imagem Transparente

Ola pessoal.
Precisaria deixar minha imagem (logo) transparante no topo, para aparecer a mesma cor (azul, preto, claro) que tenho no restante do topo.
Ja alterei a imagem deixando ela transparente, mas não funciona...
Sabem como posso fazer isso?
Em anexo esta o esmplo da imagem (como esta agora) e meu arquivo css.
Se puderem me ajudar agradeço desde ja.

Obrigado

/* Blue Body Style */

/* Main Header */

.header1 #header-bg {background: url(../images/blue/header-bg.jpg) 50% 0 no-repeat;}
.header2 #header-bg {background: url(../images/blue/header-bg2.jpg) 50% 0 no-repeat;}
#logo {background: url(../images/blue/logo.png) 0 0 no-repeat;}
body {background: #EFF8FA;color: #3E7288;}

/* Search Bar */

#searchmod {background: #ddebf1;border: 1px solid #b7d9e9;border-bottom: 0;}
#searchmod .inputbox {background: #EFF8FA url(../images/blue/search-icon.png) 98% 50% no-repeat;border: 1px solid #b7d9e9;}
#roksearch_results {background: #EFF8FA;border: 1px solid #b7d9e9;}
#roksearch_results a#roksearch_link {background: url(../images/blue/close.png) 0 0 no-repeat;}
#roksearch_results h3 {color: #444;}
#roksearch_results span {color: #888;}
#roksearch_results .roksearch_header, #roksearch_results .roksearch_row_btm {background: #fff;border-bottom: 1px solid #b7d9e9;color: #666;}
#roksearch_results .roksearch_row_btm span {color: #999;}
#roksearch_results span.small {color: #666;}
#roksearch_results span.highlight {background: #999;color: #fff;}
#roksearch_results a:hover {color: #fff;}
#roksearch_results .roksearch_odd {background: #EFF8FA;border-bottom: 1px solid #b7d9e9;}
#roksearch_results .roksearch_even {background: #EFF8FA;border-bottom: 1px solid #b7d9e9;}
#roksearch_results .roksearch_odd-hover, #roksearch_results .roksearch_even-hover {background-color: #fff;}
#roksearch_results .roksearch_odd-hover h3, #roksearch_results .roksearch_even-hover h3 {background: url(../images/blue/list-arrow.png) 0 4px no-repeat;}
.results ol.list li p {color: #666;}
#roksearch_results .arrow-left {background: #e9e9e9 url(../images/blue/list-arrow2.png) 50% 50% no-repeat;;border: 1px solid #d9d9d9;}
#roksearch_results .arrow-left-disabled {background: #fefefe;border: 1px solid #e9e9e9;}
#roksearch_results .arrow-right {background: #e9e9e9 url(../images/blue/list-arrow.png) 50% 50% no-repeat;border: 1px solid #d9d9d9;}
#roksearch_results .arrow-right-disabled {background: #fefefe;border: 1px solid #e9e9e9;}
form.search_result {background: url(../images/blue/main-tr.png) 100% 0 no-repeat;}
form.search_result .inputbox {border: 1px solid #b7d9e9;}
div.results {background: url(../images/blue/main-tr.png) 100% 0 no-repeat;}
fieldset.phrase, fieldset.word, fieldset.only {border-bottom: 1px solid #b7d9e9;}

/* Top Main Menu */

#horiz-menu {background: #ddebf1;border-top: 1px solid #b7d9e9;border-bottom: 1px solid #b7d9e9;}
#horiz-menu li.active a, #horiz-menu li.active .separator {background: #EFF8FA url(../images/blue/roktabs-container.png) 0 0 repeat-x;border-bottom: 1px solid #EFF8FA;border-left: 1px solid #b7d9e9;border-right: 1px solid #b7d9e9;border-top: 1px solid #b7d9e9;}
#horiz-menu li:hover a, #horiz-menu li:hover .separator, #horiz-menu li.sfHover a, #horiz-menu li.sfHover .separator {background: #fff;border: 1px solid #b7d9e9;}
#horiz-menu li.active a, #horiz-menu li.active .separator, #horiz-menu li:hover a, #horiz-menu li:hover .separator, #horiz-menu li.sfHover a, #horiz-menu li.sfHover .separator {color: #73A0B3 !important;}

/* Top Main Menu Dropdowns */

#horiz-menu li li {border-bottom: 1px solid #b7d9e9;}
#horiz-menu ul ul {background: #fff;border: 1px solid #b7d9e9;}
#horiz-menu ul ul ul {border-top: 1px solid #b7d9e9 !important;}
#horiz-menu ul ul li a.daddy, #horiz-menu ul li.parent.active:hover li a.daddy, #horiz-menu ul li.parent.active.sfHover li a.daddy, #horiz-menu ul ul li .separator.daddy, #horiz-menu ul li.parent.active:hover li .separator.daddy, #horiz-menu ul li.parent.active.sfHover li .separator.daddy {background: url(../images/blue/list-arrow.png) 95% 12px no-repeat;}
.menutop .submenu-animation-left {background-color: #D3E1E6;}
#horiz-menu.suckerfish li li:hover, #horiz-menu.suckerfish li li.sfHover, #horiz-menu.splitmenu li li:hover, #horiz-menu.splitmenu li li.sfHover {background: #ddebf1;}

/* Showcase Section */

.showcase-bar {background: #ddebf1;border-top: 1px solid #b7d9e9;border-bottom: 1px solid #b7d9e9;}
#main-showcase {background: #ddebf1;}
.main-showcase-outer {border: 1px solid #b7d9e9;}
#showmodules {background: #F4FDFF;border: 1px solid #b7d9e9;}

/* Main Body Items */

#maincol a:hover, #maincol a.readon:hover {color: #333;}
#main-body.alt {background: url(../images/blue/main-tr.png) 100% 0 no-repeat;border-top: 1px solid #b7d9e9;}
.main-article-block a:hover {color: #3E7287;}
.main-article-block, .blog_more ul {background: url(../images/blue/main-tr.png) 100% 0 no-repeat;border-top: 1px solid #b7d9e9;}
.main-article-block2 {background: url(../images/blue/main-bl.png) 0 100% no-repeat;border-bottom: 1px solid #b7d9e9;}
.main-article-title {border-left: 1px solid #b7d9e9;}
.contentheading {background: url(../images/blue/sidemod-h3.png) 0 100% no-repeat;}
.blog_more ul li {background: url(../images/blue/list-arrow.png) 0 9px no-repeat;border-bottom: 1px solid #b7d9e9;}
.blog_more ul li a:hover {color: #3E7287;}
.main-article-block ul li {background: url(../images/blue/list-arrow.png) 0 4px no-repeat;}
#breadcrumbs {border-bottom: 1px solid #b7d9e9;}
.breadcrumbs {color: #3E7287;}
a.pathway {color: #73A0B3;}
.pathway img {background: url(../images/blue/list-arrow.png) 0 3px no-repeat;}
.componentheading {background: url(../images/blue/list-arrow.png) 4px 8px no-repeat;}
.modifydate, .createdby, .createdate {color: #73A0B3;}
a.readon {background: #fff url(../images/blue/readon-bg.png) 0 100% repeat-x;border: 1px solid #b7d9e9;color: #3E7287;}
a.readon:hover {background: #fff;color: #666;}
a.show-readon:hover {color: #666;}
.pagination .tab {background: #fff url(../images/blue/readon-bg.png) 0 100% repeat-x;border: 1px solid #b7d9e9;}
.pagination .page-block {background: #fff;border: 1px solid #b7d9e9;}
.module a:hover {color: #3E7287;}
#mainmodules {border-bottom: 1px solid #b7d9e9;}

/* Side Column Modules */

.sidemod-title {border-left: 1px solid #b7d9e9;border-bottom: 1px solid #b7d9e9;}
.sidemod h3, .search-results-full h3 {background: url(../images/blue/sidemod-h3.png) 0 100% no-repeat;}
.hilite1 .module {background: #ddebf1;border: 1px solid #b7d9e9;border-top: 0;}
.hilite2 .module {background: #F4FDFF;border: 1px solid #b7d9e9;border-top: 0;}
.hilite3 .module {background: #fff;border: 1px solid #b7d9e9;border-top: 0;}

/* Side Menus */

#main-body ul.menu li {background: #E7F4F8;border: 1px solid #b7d9e9;}
#main-body ul.menu li a, #main-body ul.menu li .separator {border: 1px solid #E7F4F8;}
#main-body ul.menu li a:hover, #main-body ul.menu li.active a {background: #F4FDFF url(../images/blue/menu-tr.png) 100% 0 no-repeat;border: 1px solid #b7d9e9;}
#main-body ul.menu span {background: url(../images/blue/list-arrow.png) 4px 10px no-repeat;}
#main-body ul.menu li:hover span, #main-body ul.menu li.active span {background: url(../images/blue/list-arrow.png) 4px 10px no-repeat;}
#main-body ul.menu li.active ul {background: #F4FDFF;}
#main-body ul.menu li.active ul {border: 1px solid #b7d9e9;}
#main-body ul.menu li.active.parent li a:hover, #main-body ul.menu li.active.parent li.active.parent li a:hover {color: #333;}

/* Bottom Section */

#main-footer {background: #ddebf1;border-top: 1px solid #b7d9e9;border-bottom: 1px solid #b7d9e9;}
#bot-logo {background: url(../images/blue/bot-logo.png) 0 0 no-repeat;}
#copyright, #copyright a {color: #3E7287;}

/* Extra Joomla Elements */

.sectiontableheader {background: url(../images/blue/main-tr.png) 100% 0 no-repeat;border-top: 1px solid #b7d9e9;border-bottom: 1px solid #b7d9e9;}
tr.sectiontableentry1:hover {background: #ddebf1;}
tr.sectiontableentry2:hover {background: #ddebf1;}
tr.sectiontableentry1 td, tr.sectiontableentry2 td, td.sectiontableentry1, td.sectiontableentry2 {border-bottom: 1px solid #b7d9e9;}
ul#mainlevel li {background: url(../images/blue/list-arrow.png) 0 4px no-repeat;}

/* Extra Content Styles */

.module form.poll a {color: #3E7287;}
.module form.poll a:hover {color: #666;}
.tool-tip {background: #fbf3ad;color: #333;border: 2px solid #f8e639;}
a.large .button {background: url(../images/blue/font-button.png) 0 0 no-repeat;}
a.small .button {background: url(../images/blue/font-button.png) 0 -13px no-repeat;}
#lock-button {background: url(../images/blue/lock.png) 0 50% no-repeat;}
#lock-button.login {background: url(../images/blue/lock2.png) 0 50% no-repeat;}

/* Login Styles */

form.form-login, form.log {background: url(../images/blue/main-br.png) 100% 100% no-repeat;border-bottom: 1px solid #b7d9e9;}
form.form-login .inputbox {background: #EFF8FA;border: 1px solid #b7d9e9;color: #3E7287;}
.login-links a {background: url(../images/blue/list-arrow.png) 0 3px no-repeat;}
input.button {background: #fff url(../images/blue/readon-bg.png) 0 100% repeat-x;border: 1px solid #b7d9e9;}
input.button:hover {background: #fff;color: #3E7287;}
#login-module h3 {background: url(../images/blue/lock2.png) 0 2px no-repeat;}
a#rokbox-close {background: url(../images/blue/close.png) 0 0 no-repeat;}

/* RokTabs */

.roktabs-wrapper {border-bottom: 1px solid #b7d9e9;}
.roktabs-wrapper .roktabs-links {background: url(../images/blue/roktabs-li-bg.png) 0 0 repeat-x;}
.roktabs-wrapper .active-arrows .roktabs-links {background: url(../images/blue/roktabs-li-bg.png) 0 0 repeat-x;}
.roktabs-wrapper .roktabs-links ul li.active span {border-right: 1px solid #b7d9e9;border-left: 1px solid #b7d9e9;}
.roktabs-wrapper .roktabs-links ul.roktabs-top li.active, .roktabs-wrapper .roktabs-links ul.roktabs-bottom li.active {background: url(../images/blue/roktabs-li-active.png) 50% 0 repeat-x;}
.roktabs-wrapper .arrow-next {background: url(../images/blue/roktabs-next.png) 0 0 no-repeat;}
.roktabs-wrapper .arrow-prev {background: url(../images/blue/roktabs-prev.png) 0 0 no-repeat;}
.roktabs-wrapper .roktabs-container-bg {background: url(../images/blue/roktabs-container.png) 0 0 repeat-x;}
.tabs-bottom .roktabs-wrapper .roktabs-container-bg {border-top: 1px solid #b7d9e9;}
.roktabs-wrapper .roktabs-container-br {background: url(../images/blue/main-br.png) 100% 100% no-repeat;}
.roktabs-wrapper .roktabs-container-bl {background: url(../images/blue/main-bl.png) 0 100% no-repeat;}
.roktabs-wrapper .roktabs-container-tl {background: url(../images/blue/roktabs-tl.png) 0 0 no-repeat;}
.roktabs-wrapper .roktabs-container-tr {background: url(../images/blue/roktabs-tr.png) 100% 0 no-repeat;}

/* Form overrides */

form.editor {background:#ddebf1;border: 1px solid #b7d9e9;}
form.editor input, form.editor textarea {border:1px solid #b7d9e9;background: #EFF8FA;}
form.editor fieldset a {color: #00c;}
form.editor fieldset {border-bottom:1px solid #b7d9e9;}
form.editor legend {color:#3E7287;background:url(../images/blue/list-arrow.png) 0 50% no-repeat;}

/* RokCandy Formatting */

img.feature-img {border: 1px solid #b7d9e9;}
.feature-img-title {background: #EFF8FA;border: 1px solid #b7d9e9;}
a.img-title {background: url(../images/blue/icon1.png) 0 0 no-repeat;}

.showcase-feature {background: url(../images/blue/show-bg.jpg) 0 0 no-repeat;}
.show-feat-block1 {background: url(../images/blue/rtl/main-tl.png) 0 0 no-repeat;border-top: 1px solid #b7d9e9;border-bottom: 1px solid #b7d9e9;}
.show-feat-block2 {background: url(../images/blue/main-tr.png) 100% 0 no-repeat;}
.show-feat-block3 {background: url(../images/blue/main-bl.png) 0 100% no-repeat;}
.show-feat-block4 {background: url(../images/blue/main-br.png) 100% 100% no-repeat;}
a.show-readon {border: 1px solid #b7d9e9;border-bottom: 1px solid #F4FDFF;background: #F4FDFF;}
.show-feat2-bg {background: url(../images/blue/feat2-bg-t.png) 0 0 no-repeat;height: 5px;}
.show-feat2-bg2 {background: url(../images/blue/feat2-bg.png) 0 0 repeat-y;}
.show-feat2-bg3 {background: url(../images/blue/feat2-bg-b.png) 0 0 no-repeat;height: 5px;}
 span.important-title, span.important-title-blue, span.important-title-red, span.important-title-green, span.important-title-purple, span.important-title-orange, span.important-title-brown, span.important-title-grey {background: #EFF8FA !important;}
blockquote, pre {background: #ddebf1 !important;border: 1px solid #b7d9e9 !important;}

/* Frontpage styles */

.content-row {border-bottom:1px solid #B7D9E9;}
.content-row-img img { border: 1px solid #dfdfdf; }

Anexos:

Please Entrar ou Registrar to join the conversation.

Acimar Rocha
Offline
JCB! Geek

Mais

15 anos 6 meses atrás #29413 por Acimar Rocha

Acimar Rocha replied the topic: Re: Deixar imagem Transparente

Olá,

E qual o nome da imagem do logo?
No código consta essa:
#logo {background: url(../images/blue/logo.png) 0 0 no-repeat;}

Se a sua logo foi salva com fundo transparente e se for a imagem: logo.png, certamente deverá funcionar.

Abs.

Acimar Rocha -[color=#0080FF:36wlu71r] [url:36wlu71r]http://www.webpositiva.com.br[/url:36wlu71r][/color:36wlu71r]
[i:36wlu71r][color=#400000:36wlu71r]Você não pode ter tudo... Onde você colocaria?[/color:36wlu71r][/i:36wlu71r]

Please Entrar ou Registrar to join the conversation.

renpv
Offline
JCB! Geek

Mais

15 anos 6 meses atrás #29422 por renpv

renpv replied the topic: Re: Deixar imagem Transparente

Deve funcionar em alguns navegadores mas não em todos, lembro que tive esse mesmo problema e a solução que encontrei foi criar um fundo na imagem imitando o fundo da página. <img src="{SMILIES_PATH}/icon_e_ugeek.gif" alt=":ugeek:" title="Uber Geek" />

[color=#808080:2ig2voll]"Feliz aquele que transfere o que sabe e aprende o que ensina."(Cora Coralina)
"A mente que se abre a uma nova idéia jamais voltará ao seu tamanho original."(Albert Einstein)[/color:2ig2voll]
[url=http://twitter.com/renatopaivabv:2ig2voll]@renatopaivabv[/url:2ig2voll]

Please Entrar ou Registrar to join the conversation.

tapes
Autor do Tópico
Offline
JCB! Senior

Mais

15 anos 6 meses atrás #29431 por tapes

tapes replied the topic: Re:[RESOLVIDO] Deixar imagem Transparente

Ok pessoal.
Consegui deixar a imagem transparente através do PNG...
Obrigado pela ajuda.

Até

Please Entrar ou Registrar to join the conversation.

brunodyjorge
Offline
JCB! Geek

Mais

15 anos 2 meses atrás #36007 por brunodyjorge

brunodyjorge replied the topic: Re: Re:[RESOLVIDO] Deixar imagem Transparente

tapes escreveu: Consegui deixar a imagem transparente através do PNG...

Também é possível com .gif.

Não é possível salvar .jpg com transparência.

Please Entrar ou Registrar to join the conversation.

Joomla Templates Best Joomla Templates Premium Joomla Templates Free Joomla Templates