반투명 이미지 테두리

StackOverflow https://stackoverflow.com/questions/642130

  •  22-07-2019
  •  | 
  •  

문제

이미지가 컨테이너 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>
도움이 되었습니까?

해결책

당신이 좋아하는 반 트랜스 펜트 효과로 PNG 파일을 만들고 이것을 배경으로 추가 할 수 있습니다. 모든 최신 브라우저는 올바르게 렌더링하고 원하는 효과를 만듭니다.

다른 팁

Gecko 및 WebKit은 RGBA ()를 경계 색상 속성으로 설정하므로 잠재적으로 설정할 수 있습니다.

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

.. 그리고 반 투피 인 테두리가 있습니다.

그러나 출혈을 달성하려면 이미지의 투명한 div를 오버레이하고 이미지의 너비와 높이와 같은 너비와 높이를 테두리 너비를 뺀 것과 동일해야합니다. 따라서 이미지가 200x200이고 2px 테두리를 원한다면 Box 모델이 테두리 너비가 너비/높이 치수에 추가되도록 지시하기 때문에 DIV 196X196을 만들어야 할 것입니다.

이것은 JS & CSS 솔루션이지만 언급 할 가치가 있습니다.

Glassbox-JS

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top