Добавление простой CSS в iframe/HTML

У меня есть некоторые HTML-код из investing.com ниже:Добавление простой CSS в iframe/HTML

<iframe frameborder="0" height="380" width="230" src="https://ssltools.forexprostools.com/currency-converter/index.php?from=17&to=12&force_lang=1"></iframe><br /><table width="197"><tr><td><span style="font-size: 11px;color: #333333;text-decoration: none;">The Currency Converter is powered by <a href="https://www.investing.com/" rel="nofollow" target="_blank" style="font-size: 11px;color: #06529D; font-weight: bold;" class="underline_link">Investing.com</a></span></td></tr></table>

Выход выглядеть на рисунке:

enter image description here

И я хотел бы добавить css, чтобы сделать фон, как показано ниже: Закругленный прямоугольник, 3 0 непрозрачности с светло-зеленый, может быть 10 точек на полях

enter image description here

Может кто-нибудь помочь мне. Я новичок в html и css. Большое спасибо.

Лоуренс

источник

2017-01-19 Yung Lin Ma

Простейший и совместимый с большинством браузеров способ - не пытаться стилизовать iframe, а создать округлый светло-зеленый блок в собственном документе и поместить внутри него iframe. –

Потому что код создан investing.com. поэтому я просто хочу добавить «цветную оболочку», чтобы окружить ее –

просто добавить обертывание div и CSS класс .frame {} с цветной границей

.frame { 
 
    display: inline-block; 
 
    border: 30px solid ; 
 
    border-color: rgba(200,255,200,0.6); 
 
    border-radius: 30px; 
 
    margin: 10px; 
 
}

<div class="frame"><iframe frameborder="0" height="380" width="230" src="https://ssltools.forexprostools.com/currency-converter/index.php?from=17&to=12&force_lang=1"></iframe><br /><table width="197"><tr><td><span style="font-size: 11px;color: #333333;text-decoration: none;">The Currency Converter is powered by <a href="https://www.investing.com/" rel="nofollow" target="_blank" style="font-size: 11px;color: #06529D; font-weight: bold;" class="underline_link">Investing.com</a></span></td></tr></table></div>

<style> 
    .frame { 
     display: inline-block; 
     border: 30px solid ; 
     border-color: rgba(200,255,200,0.6); 
     border-radius: 30px; 
     margin: 10px; 
    } 
</style> 
    <div class="frame"><iframe frameborder="0" height="380" width="230" src="https://ssltools.forexprostools.com/currency-converter/index.php?from=17&to=12&force_lang=1"></iframe><br /><table width="197"><tr><td><span style="font-size: 11px;color: #333333;text-decoration: none;">The Currency Converter is powered by <a href="https://www.investing.com/" rel="nofollow" target="_blank" style="font-size: 11px;color: #06529D; font-weight: bold;" class="underline_link">Investing.com</a></span></td></tr></table></div>

источник

2017-01-19 08:53:23 Banzay

Я попытался объединить эти 2 кода, но не работает –

Причина может быть в ваших собственных стилях на вашей странице. было бы здорово, если бы вы указали код в своем вопросе. – Banzay

Должен ли css на первом месте или html? –

Я предлагаю вам положить IFRAME на дела. В этом примере .iframe-container. Таким образом, HTML будет выглядеть следующим образом:

<div class="iframe-container"> 
     <iframe frameborder="0" height="340" width="210" src="https://ssltools.forexprostools.com/currency-converter/index.php?from=17&to=12&force_lang=1"></iframe> 
    </div> 
    <br /> 
    <table width="197"> 
     <tr> 
      <td> 
       <span style="font-size: 11px;color: #333333;text-decoration: none;">The Currency Converter is powered by <a href="https://www.investing.com/" rel="nofollow" target="_blank" style="font-size: 11px;color: #06529D; font-weight: bold;" class="underline_link">Investing.com</a> 
       </span> 
      </td> 
     </tr> 
    </table>

Пожалуйста, обратите внимание, что я изменился с и высота фрейма, поскольку форма была содержащей, не был подобран с начальными признаками. Вы можете сбросить его, если хотите. Затем написать некоторые CSS, как показано ниже:

.iframe-container { 
    display: inline-block; 
    margin: 30px; 
    padding: 30px; 
    background: rgba(0, 255, 0, .3); 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    border-radius: 30px; 
} 
iframe { 
    margin: 0; 
    padding: 0; 
    background: white; 
}

Смотрите результат на jsFiddle.

источник

2017-01-19 09:03:57

Я попытался объединить эти 2 кода, но не работает –

Извините! Я знаю, что это моя проблема, что я много раз пытался объединить эти HTML и css вместе, но не работает.

Моя цель - только иметь «пакет кода» для вставки на сайт.

Благодарим вас за беспокойство.

источник

2017-01-19 10:49:48

Добавление простой CSS в iframe/HTML

ответ

Смежные вопросы