Change external iframe color or set opacity to iframe

Asked

Viewed 463 times

0

I wonder if you have how to change the css of an EXTERNAL iframe that already has a white background and black font...

if it is not possible, I would like to leave the opacity of the frame a little Transparent because my page is black and it is all white, then in case it would be very weak opacity and when you pass the mouse (Hover) it is in true opacity...

css or javascript... the current iframe code looks like this:

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

3 answers

1

CSS SOURCE

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


I believe you edit the CSS of the content of <iframe> cannot, since it is external. Already to manipulate the element opacity, use this:

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

With that the <iframe> will have a transparency and when the mouse position on top, will be fully visible.

0

If you are asking this, it is because you do not control the external iframe, right? Otherwise it would be trivial to solve your problem.

This only works if the iframe is loaded from the same domain as the parent page. You won’t be able to via CSS, but via javascript it works. You can use any framework, such as jQuery or bootstrap, to make your task easier as well. The parent page is accessible from the iframe through the object parent.

For example:

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

(Stealing this answer)

Now, if the mother page and the page on iframe are from different domains, there is no way. It would be a huge security breach if this were possible.

  • this edge would be internal or external to the iframe?

  • @Leocaracciolo edge of any element on the page containing the iframe.

  • same as that iframe { border: 3px Solid #0000FF } ?

  • @Leocaracciolo.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.