Jump to content
  • 0

полупрозрачный блок


Rilo
 Share

Question

как можно сделать, чтобы блок был полупрозрачным или как бызатуманенным?

хочу выделить область в div и придать ей свойства, чтобы она была полувидима.

http://nhjugfbd.at.tut.by/opacity.htm

Edited by Rilo
Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0

сделал CSS

{ opacity: 0.45; filter: alpha(opacity=45);  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=45); -moz-opacity: 0.45; -khtml-opacity: 0.45 }

в мозиле 1.8 работает, а в IE никак.

полупрозрачная должна быть не картинка, а абзац h2 с текстом.

http://htmlbook.ru/blog/poluprozrachnyy-fon

http://www.internet-technologies.ru/articl...ticle_1028.html

Edited by Rilo
Link to comment
Share on other sites

  • 0
сделал CSS

{ opacity: 0.45; filter: alpha(opacity=45);  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=45); -moz-opacity: 0.45; -khtml-opacity: 0.45 }

в мозиле 1.8 работает, а в IE никак.

полупрозрачная должна быть не картинка, а абзац h2 с текстом.

http://htmlbook.ru/blog/poluprozrachnyy-fon

http://www.internet-technologies.ru/articl...ticle_1028.html

Без этого попробуй - filter: progid:DXImageTransform.Microsoft.Alpha(opacity=45);

Выложи код свой

Link to comment
Share on other sites

  • 0

вообще-то мозилла это движок, а не версия браузера, и последняя версия мозиллы 1.9.

значит, в последних версиях браузеры эту функцию больше не поддерживают?

http://htmlbook.ru/blog/poluprozrachnyy-fon

как можно наложить картинку на такой DIV с текстовыми абзацами, чтобы не фон снизу, а сверху?

Edited by Rilo
Link to comment
Share on other sites

  • 0

автор, не сбивайся с толку.

wantuz == шут.

всё поддерживается. Влад бы не стал писать непроверенную информацию.

Либо вот такой ещё вариант полупрозрачности есть, когда надо, чтоб полупрозрачным становился только фон, но никак не содержимое.

Link to comment
Share on other sites

  • 0

вероятно, прозрачность в IE работает не так, как в mozilla. В mozilla основной передний план смешивается с цветом заднего плана, а в IE основной цвет остаётся прежним, но делает видимым задний план. Мне, наверное, надо "накрыть" абзац" белым и сделать белое прозрачным.

Edited by Rilo
Link to comment
Share on other sites

  • 0

Serlutin спасибо за подсказку

если обратить на это внимание, то вот информация

http://msdn.microsoft.com/en-us/library/ms532967.aspx

выложил исправленную версию для IE http://nhjugfbd.at.tut.by/opacity_da.htm

Но теперь IE запрашивает разрешение, чтобы выполнить скрипт. А это плохо, большинство читателей этого не поймут. :-(

 { width:100%; filter:alpha(opacity=50); -moz-opacity: 0.45; -khtml-opacity: 0.45 }

Edited by Rilo
Link to comment
Share on other sites

  • 0

Для IE вы исправили, а для других браузеров поддержку убрали :-)

Но теперь IE запрашивает разрешение, чтобы выполнить скрипт. А это плохо, большинство читателей этого не поймут.

Возможно, это вы запустили страничку, расположенную на компьютере, а не в интернете. Стандартные настройки безопастности блокируют любые скрипты, которые запускаются с локальной странички. Зашёл по вашей ссылке - IE6 молча пропустил.

Link to comment
Share on other sites

  • 0

параметр width испортил форматирование. было обтекание картинок строками абзаца, а теперь в mozill-е отображается правильно, а IE сделал абзац квадратным блоком.

вариант, где прозрачность к DIV

http://nhjugfbd.at.tut.by/opacity_da.htm

а здесь прозрачность к абзацу (без DIV)

http://nhjugfbd.at.tut.by/opacity_da1.htm

графически как надо

http://nhjugfbd.at.tut.by/nadotak.jpg

Edited by Rilo
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Обсуждения

    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy