0

Gostaria de saber se tem como mudar o css de um iframe EXTERNO que já tem um background branco e fonte preta...

se não for possível, gostaria de deixar a opacidade do frame um pouco transparent porque a minha página é preta e ele é todo branco, ai no caso ficaria a opacidade bem fraquinha e quando passa o mouse (hover) ele fica na verdadeira opacidade...

css ou javascript... o código atual do iframe está assim:

<iframe allowtransparency='true' class='classpadrao' frameborder='0' height='410' id='idpadrao' name='namepadrao' src='' width='100%'/>

3 Respostas 3

1

CSS FONTE

iframe {
/* Required for IE 5, 6, 7 */
zoom: 1;

/* Theoretically for IE 8 & 9 (more valid) */   
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);

/* Older than Firefox 0.9 */
-moz-opacity:0.5;

/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;

/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}
0

Acredito que você editar o CSS do conteúdo do <iframe> não tenha como, já que ele é externo. Já para manipular a opacidade do elemento, use isso:

iframe {
   opacity: .3;
}
iframe:hover {
   opacity: 1;
}

Com isso o <iframe> vai ter uma transparência e quando o mouse posicionar em cima, vai ficar totalmente visível.

0

Se você está perguntando isso, é porque você não controla o iFrame externo, certo? Caso contrário seria trivial resolver o seu problema.

Isso só funciona se o iframe for carregado a partir do mesmo domínio que a página mãe. Você não vai conseguir via CSS, mas via javascript funciona. Você pode usar qualquer framework, como jQuery ou bootstrap, pra tornar sua tarefa mais fácil também. A página mãe é acessível a partir do iframe através do objeto parent.

Por exemplo:

parent.$("#ID").css("border","1px solid red");

(Roubartilhado desta resposta)

Agora, se a página mãe e a página no iframe forem de domínios diferentes, não tem como. Seria uma falha enorme de segurança se isso fosse possível.

4
  • essa borda seria interna ou externa do iframe?
    – user60252
    Commented 14/06/2017 às 19:18
  • @LeoCaracciolo borda de um elemento qualquer da página que contém o iframe. Commented 14/06/2017 às 19:18
  • o mesmo que isso iframe { border: 3px solid #0000FF } ?
    – user60252
    Commented 14/06/2017 às 19:20
  • @LeoCaracciolo não. Commented 14/06/2017 às 19:21

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 .