0

Como faço para deixar uma 'td' com bgcolor transparente sem usar STYLE?

Posso somente utilizar bgcolor na peça, para não causar erros!! muitos navegadores não renderizam o style.

Por ser e-mail marketing não posso usar folha de estilo, tenho que aplicar todo o css inline, sabem alguma forma de inserir o efeito de transparência inline?

 <tr>
            <td width="246" height="200" align="center">
               <a href="#" target="_blank">
               <img src="images\foto.jpg" width="200" height="200" border="0" /></a>
            </td>
 </tr>
2
  • Só espero que não seja para envio de SPAM :P
    – Dorath
    4/04/2014 às 14:18
  • hum...como não? estilos inline são inclusive usados nos templates do MailChimp.
    – Leandro RR
    4/04/2014 às 14:44

3 Respostas 3

1

Aplique o background-color em um atributo style:

<td style="background-color: rgba(123, 123, 123, 0.5)">

O valor 0.5 é a quantidade de transparência que você quer colocar na cor. Varia entre 0 (totalmente transparente) e 1 (sem transparência). Os outros valores são a quantidade de R (red), G (green) e B (blue), que variam entre 0 e 255.

Fiz um teste usando o atributo bgcolor, mas aparentemente ele só funciona com a função rgb() (não funciona com a rgba()).

Código HTML:

<div style="background-color: blue">
    <table style="background-color: rgba(123,123,123,0.7)">
        <tr>
            <td>asdasda</td>
        </tr>
    </table>

    adasdasd
</div>

Exemplo no jsFiddle: http://jsfiddle.net/4V5Sz/

2
  • Não posso usar style, tenho que usar os codigos html puro, no caso para mudar o fundo seria com bgcolor, se eu usar style alguns navegadores não renderizam, causando erros na peça.
    – CRAJ
    4/04/2014 às 14:23
  • 1
    Como comentei na resposta, o rgba não funcionou com bgcolor. A solução que proponho, então, é fazer algo com um gif transparente.
    – Michael
    4/04/2014 às 14:53
1

Se entendi bem a pergunta, você pode usar background-color:rgba();, exemplo:

<table style="background:#666;">
<thead>
    <tr>
        <th>Coluna 1</th>
        <th>Coluna 2</th>
        <th>Coluna 3</th>
    </tr>
</thead>
<tbody>
    <tr style="background:blue;">
        <td>dado</td>
        <td style="background-color:rgba(102,102,102,1);">dado</td>
        <td>dado</td>
    </tr>
    <tr>
        <td>dado</td>
        <td>dado</td>
        <td>dado</td>
    </tr>
    <tr>
        <td>dado</td>
        <td>dado</td>
        <td>dado</td>
    </tr>
</tbody>

Veja exemplo online: JSFiddle

1
  • Não posso usar style, tenho que usar os codigos html puro, no caso para mudar o fundo seria com bgcolor, se eu usar style alguns navegadores não renderizam, causando erros na peça.
    – CRAJ
    4/04/2014 às 14:23
0

opacity:0.4;filter:alpha(opacity=40);

<table style="background-image:url('images_teste/1.jpg');opacity:0.4;filter:alpha(opacity=40);">
      <tr>
        <td>2</td>
        <td>&nbsp;</td>
      </tr>
    </table>

Para o IE8 coloquei a tag filter:alpha(opacity=40); Basicamente o CSS inline e com código externo é igual, você coloca tudo na linha, separando por ; "ponto-vírgula"

fonte: http://www.w3schools.com/css/css_image_transparency.asp

5
  • Não posso usar style, tenho que usar os codigos html puro, no caso para mudar o fundo seria com bgcolor, se eu usar style alguns navegadores não renderizam, causando erros na peça.
    – CRAJ
    4/04/2014 às 14:22
  • então infelizmente não tem como.o html não faz transparência nativamente. mesmo o html5, até porque não é o foco do html e sim do CSS fazer esses ajustes.
    – Dorath
    4/04/2014 às 14:25
  • Já tentou deixar um png com canal alfa, transparente e chama-lo ?
    – Dorath
    4/04/2014 às 14:26
  • Amigo, eu ja consegui implementar uma vez a transparência na TD usando o html, ai aplico uma imagem .gif com metade da imagem branca e a outra metade transparente e uso o bgcolor da TR para deixar com os cantos arredondados. Entendeu a intenção? Só não lembro como fiz, mas sei que fiz!! Mas Obrigado pela resposta a pronta instância!!
    – CRAJ
    4/04/2014 às 14:27
  • .PNG tb nao pode ser usado para o bom funcionamento da peça, o outlook entre outros e-mails não renderizam png direito e aplicam fundo a imagem quando transparente, um saco, mas fato!! to tentando lembrar como fiz, mas até agora nada..
    – CRAJ
    4/04/2014 às 14:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .