Как сделать так, чтобы содержимое ящика переполняло фон - PullRequest
Новая
       14

Как сделать так, чтобы содержимое ящика переполняло фон

1 голос
/ 20 ноября 2011

Я пытаюсь сделать что-то подобное с помощью CSS3:

enter image description here

Где фиолетовый круг - это изображение, а менее фиолетовая - это div-фон.

Моим первым предположением было отрицательное заполнение, но быстрый поиск показал, что это запрещено.Нормальное переполнение не работает, потому что я хочу, чтобы оно начиналось как над фоном, так и заканчивалось под ним.Я довольно новичок в CSS, поэтому я не знаю, как это можно сделать.

1 Ответ

0 голосов
/ 20 ноября 2011

Используйте относительное позиционирование, верхнее и, возможно, левое. 

position: relative;
top: -25px;
left: -15px;

Относительное позиционирование определено в CSS 2.0.Это означает, что CSS3 не требуется, и он будет работать почти во всех браузерах, включая мобильные.

Вам также нужно будет установить высоту и верхнее поле для div.выход. 

<html>
<head>
 <style type="text/css">
  .purpleRectangle{
   background: #b93b8f;
   height: 200px;
   margin-top: 30px;
  }
  img{
   position: relative;
   top: -25px;
   left: 15px;
  }
 </style>
</head>
<body>
 <div class="purpleRectangle">
  <img src="circle.png" />
 </div>
</body>
</html>

enter image description here

...