Полупрозрачная граница изображения - PullRequest
Новая
       7

Полупрозрачная граница изображения

0 голосов
/ 13 марта 2009

Мне бы хотелось, чтобы изображение стекало в контейнер div.imgborder, и я бы хотел, чтобы кровотечение было полупрозрачным (как эффект непрозрачного стекла). Есть ли способ добиться этого с помощью CSS или, возможно, установить фоновый рисунок с некоторой непрозрачностью на div.imgborder? 

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
        'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<title></title>

<meta name='keyword' content=''>
<meta name='description' content=''>

<link rel='stylesheet' href='reset.css'>

<style type='text/css'>
    body {
      background-color: #ccc;   
    }

    div#container {
      width: 960px;
      margin-left: auto; 
      margin-right: auto;
      margin-top: 50px;
    }

    img#myimg {
      overflow: visible;
    }

    div.imgborder {
      background-color: #222;
      opacity: 0.9;
      width: 160px;
      height: 160px;
      padding: 10px;
    }


</style>

</head>
<body>
    <div id='container'>

        <div class='imgborder' align='center'>
            <img src='bar.jpg' alt='' width='160' height='160' id='myimg' />
        </div>

    </div>
</body>
</html>

Ответы [ 3 ]

2 голосов
/ 13 марта 2009

Gecko и WebKit поддерживают установку rgba () в качестве свойства цвета границы, так что вы можете потенциально установить: 

border-color: rgba(255,255,255,0.42);

.. и имеют полупрозрачную границу.

Однако, чтобы выполнить кровотечение, вам, вероятно, потребуется наложить прозрачный элемент div на изображение и присвоить ему ширину и высоту, равные ширине и высоте изображения, минус ширина рамки. Поэтому, если изображение размером 200x200, и вы хотите, чтобы граница была 2px, вам, вероятно, придется сделать div 196x196, так как блочная модель требует, чтобы ширина границы добавлялась к измерениям width / height.

1 голос
/ 13 марта 2009

это было решение js & css, но стоит упомянуть

GlassBox-JS

1 голос
/ 13 марта 2009

Вы можете создать PNG-файл с полупрозрачным эффектом, который вам нравится, и добавить его в качестве фона. Любой современный браузер будет правильно отображать это и создавать нужный эффект.

...