CSS клип не работает с абсолютным позиционированием

-1

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

Например:

<html> 
<head> 
<style> 
img { 
    position: absolute; 
    clip: rect(0px,60px,200px,0px); 
} 
</style> 
</head> 
<body> 

<img src="w3css.gif" width="100" height="140"> 
this is some text 
</body> 
</html>

Этот код прикрывает «это какой-то текст» текст с подрезанными изображениями.

Так что я хочу обрезанное изображение, но текст не должен быть закрыт.

источник

2014-11-17 Matthew

'position: absolute' удаляет элементы из нормального потока документа. Таким образом, они будут перекрывать следующие элементы. – Oriol

Есть ли способ обрезать изображения, все еще имея нормальный поток документа? – Matthew

Возможный дубликат [CSS Clip и Absolute Positioning] (http://stackoverflow.com/questions/1156776/css-clip-and-absolute-positioning) – Oriol

Это потому, что вы не указали значение topoffset.

Demo

img { 
    position: absolute; 
    clip: rect(20px,60px,200px,0px); 
}

значения:

clip: rect(top offset, visible width, visible height, left offset)

Первое число указывает верхнюю смещение - верхний край окна подрезки.
Последнее число указывает левое смещение - левый край обрезающего окна.
Второе число - это ширина обрезающего окна плюс левое смещение (последний номер).
Третье число - это высота обрезающего окна плюс верхнее смещение (первое число).

источник

2014-11-17 17:54:34

Я не хочу, чтобы текст был на изображении. Я хочу, чтобы поведение было таким, как если бы вы выбрали «position: absolute», а изображение будет слева (обрезано), а текст будет справа, точно так же, как если бы я не обрезал изображение вообще , – Matthew

@Matthew - Итак, откуда вы хотите обрезать изображение? левый, правый, верхний, нижний? –

@Matthew - свойство 'clip' работает только в том случае, если оно позиционируется' абсолютно'. –

CSS клип не работает с абсолютным позиционированием

ответ

Demo

значения:

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