За последние 24 часа нас посетили 39093 программиста и 1286 роботов. Сейчас ищут 1019 программистов ...

"Прожигающий" блок

Тема в разделе "HTML и CSS", создана пользователем Freakmeister, 26 июл 2011.

  1. Freakmeister

    Freakmeister Активный пользователь

    С нами с:
    20 дек 2009
    Сообщения:
    888
    Симпатии:
    5
    Возможно ли средствами CSS сделать, чтобы один блок делал "дырку" в другом, т.е. показывал фон, расположенный за родительским блоком? Вот примерно что мне нужно:

    [​IMG]
     
  2. siiXth

    siiXth Активный пользователь

    С нами с:
    14 мар 2010
    Сообщения:
    1.447
    Симпатии:
    1
    когда-то искал
    ответ вроде был - никак
    уже не помню где конкретно это смотрел/читал но реализация простая - 5 блоков:1 по центру , 4 по сторонам - так и выходит прозрачность.
     
  3. alexfer

    alexfer Активный пользователь

    С нами с:
    2 авг 2010
    Сообщения:
    239
    Симпатии:
    0
    z-index? или заливка 1px png c border 100px
     
  4. Freakmeister

    Freakmeister Активный пользователь

    С нами с:
    20 дек 2009
    Сообщения:
    888
    Симпатии:
    5
    Это у меня короче последствия установки высоты колонок 100%, чтобы на них можно было наложить фон. В итоге, колонки уходят вниз под футер, т.е. нижней их части не видно, а её нужно закруглить. Теперь вот ломаю голову как это сделать.

    [​IMG]
     
  5. Обычный Нуб

    Обычный Нуб Активный пользователь

    С нами с:
    30 июн 2011
    Сообщения:
    30
    Симпатии:
    0
    А нужно только CSS? Имхо на jQuery такое сделать можно.
     
  6. Обычный Нуб

    Обычный Нуб Активный пользователь

    С нами с:
    30 июн 2011
    Сообщения:
    30
    Симпатии:
    0
    Можно так сделать если только CSS. Правда я не уверен это ли имел ввиду топикстартер?

    [​IMG]

    HTML:
    1. #divA img {
    2.     position: absolute;
    3.     z-index: -1;
    4.     top: 0px;
    5.     left: 0px;
    6. }
    7. #divB {
    8.     position: absolute;
    9.     background: yellowgreen;
    10.     width: 500px;
    11.     height: 500px;
    12.     top: 90px;
    13. }
    14. #divC {
    15.     position: absolute;
    16.     width: 480px;
    17.     height: 280px;
    18.     /*******************************/
    19.     left: 70px;
    20.     top: 190px;
    21.     border: 3px solid red;
    22.     background-position:  -73px -193px;
    23.     /*******************************/
    24.     background-image: url('http://www.vivisto.co.uk/UserFiles/Image/Nomad%20Bushmen.jpg');
    25.     background-repeat: no-repeat;
    26. }
    27.  
    28. <div id="divA">
    29.     <img src="http://www.vivisto.co.uk/UserFiles/Image/Nomad%20Bushmen.jpg"/>
    30.     <div id="divB"></div>
    31.     <div id="divC"></div>
    32. </div>