Как да постигна този ефект на картинка?

[Radko]

Искам да направя така, че примерно имам една картинка 800x600 да кажем, и искам над нея да има някакъв див с някакво opacity,но в дадена част от изображението правоъгълник да кажем с размери 300x200 opacity да си е нормално. Дано ме разбрахте какво искам да постигна, пробвах с canvas и не става, други идеи за които не се сещам са добре дошли.

 

[thedjhodja]

Не можах да те разбера точно какво искаш , но пробвай това:

<html>
<head>
<style type="text/css">
div.background
  {
  width:320px;
  height:480px;
  background:url(http://www.notitia.no/chelsea/wap/img/320x480/chelsea-logo2.jpg) repeat;
  border:2px solid black;
  }
div.opacitybox
  {
  width:200px;
  height:30px;
    margin:420px 50px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.4;
  filter:alpha(opacity=60); /* ZA IE8 */
  }
div.opacitybox p
  {
 margin:5px 0px;
  font-weight:bold;
  color:#000000;
  }
</style>
</head>

<body>

<div class="background">
<div class="opacitybox">
<p>Това е логото на Челси</p>
</div>
</div>

</body>
</html>

 

[Radko]

Искам да се получи точно обратното, където в момента е дива с opacity и пише логото на челси, да няма opacity, а останалата част от изображението да е с opacity