прозрачная маска изображения при переполнении CSS - PullRequest
Новая
       11

прозрачная маска изображения при переполнении CSS

5 голосов
/ 09 октября 2011

Я пытаюсь реализовать эквивалент свойства css: «переполнение: прозрачный 50%». Например, если у меня есть это: 

<div style="border: 1px solid black; width: 200px; height: 200px; overflow: visible;">
 <img src="img.png">
</div>

Я бы хотел, чтобы часть изображения, отображаемая в поле 200x200, была нормальной. Часть изображения, которая выходит за рамки 200х200. Я хочу быть частично прозрачной. Может быть, есть способы сделать это, определив четыре деления на всем вокруг основного деления? Я не уверен в простом способе сделать это. 

+------------------+
| img overflow,    |
| 50% transparent  |
|  +------------+  |
|  | normal img |  |
|  +------------+  |
|                  |
+------------------+

Ширина и высота изображения известны заранее. К div будет прикреплен некоторый javascript, позволяющий перемещать изображение путем перетаскивания, поэтому div будет действовать как область просмотра, и изображение может переполниться с любой стороны. В идеале должен работать во всех браузерах.

1 Ответ

2 голосов
/ 09 октября 2011

Не уверен, насколько хороша будет поддержка браузера, но что-то вроде этого должно начать вас: 

 <style>
     /* .container needs to be same size at img */
     .container {width:400px; height:400px; background:#00f; opacity:0.5; margin:0 auto; position:relative; z-index:1;}
     /* .container:before 1/4 img width, 1/2 img height, left 0, top 1/4 img, */
     .container:before {content:""; display:block; width:100px; height:200px; position:absolute; left:0px; top:100px; z-index:15; background:#0f0; opacity:0.5;}
     /* .container:before 1/4 img width, 1/2 img height, left 3/4 img, top 1/4 img */
     .container:after {content:""; display:block; width:100px; height:200px; position:absolute; left:300px; top:100px; z-index:15; background:#0f0; opacity:0.5;}
     /* .img would be your actual img at full size */
     .img {display:block; width:400px; height:400px; position:absolute; z-index:10; background:#f00;}
     /* .img:before same width as img, 1/4 height, top 0, left 0 */
     .img:before {content:""; display:block; width:400px; height:100px; position:absolute; left:0px; top:0px; z-index:15; background:#00f; opacity:0.5;}
     /* .img:after same width as img, 1/4 height, top 3/4 img height, left 0 */
     .img:after {content:""; display:block; width:400px; height:100px; position:absolute; left:0px; top:300px; z-index:15; background:#00f; opacity:0.5;}
 </style>
 <div class="container">
   <span class="img"></span>
 </div>

Редактировать: забыл ссылку на JS Fiddle.http://jsfiddle.net/BradleyStaples/rWzng/

...