2016-05-13 4 views
0

Итак, у меня есть изображение, которое находится под моим элементом div, но возможно ли это, если изображение будет под этим, div эта часть будет скрыта (отрезана)?CSS - Если изображение находится в области div, то отрежьте ту часть, которая находится в области?

+0

Да, вы должны установить цвет фона вашего div .... –

ответ

0

вы можете скрыть часть изображения, что из DIV с помощью CSS:

.divclass {overflow:hidden} 
0

Да! Если у вас есть объект A (изображение или текст или оба), и DIV B, который перекрывался в окне браузера:

  • Установить положение: относительные и г-индекс: на обеих из них (позиции: абсолютные также будет работать, если он сохранит ваш макет), так что значение z-индекса B больше, чем значение A. Это гарантирует, что B действительно укладывается поверх A, а не под ним. Например, этот CSS:

    IMG # A {

    position:relative; 
    z-index:100; 
    

    }

    ДИВ # B {

    position:relative; 
    z-index:200; /* Can be any number larger than the z=index of #A */ 
    

    }

  • Вы должны также установить цвет фона для B, потому что фон по умолчанию (который иногда является прозрачным) не будет ничего скрывать. Решите, хотите ли вы, чтобы цвет фона был того же цвета, что и остальная часть страницы, или другого цвета.

  • БОНУС: если вы хотите сделать A слегка показать через фон B, указать цвет как RGB с величиной альфа (непрозрачность). В CSS, 30% полупрозрачный белый фон будет, например, как этот CSS:

    ДИВ # B {

    position:relative; 
    z-index:200; /* Can be any number larger than the z=index of #A */ 
    background-color:#fff; /* For downlevel browsers */ 
    background-color:rgba(256,256,256,0.3); /* The last argument is for opacity, the valid range is from 0 to 1. */ 
    

    }

Заметим, что мы обеспечиваем по умолчанию, твердый -white background (#fff) во-первых, для поддержки любых браузеров, которые по-прежнему не совсем соответствуют скорости синтаксиса RGBA. Полупрозрачная версия здесь - rgba (256,256,256,0,3) - появляется после этого, поэтому она будет замещать непрозрачный фон во всех браузерах, поддерживающих декларацию RGBA; все остальные браузеры все равно будут перекрывать/скрывать ваш объект, но без прозрачности.