CSS와 투명 이미지를 만드는 것은 쉽습니다.
는 CSS opacity 속성은 CSS3 추천의 일부입니다.
예 1 - 투명한 이미지 만들기
투명성에 대한 CSS3 속성은 opacity .
처음에 우리는 어떻게 CSS와 투명한 이미지를 만드는 방법을 보여줍니다.
일반 이미지 :
투명도와 같은 이미지 :
다음 CSS 봐 :
opacity 1.0 - 속성은 0.0에서 값을 취할 수 있습니다. 낮은 값이 더 투명.
IE8 및 이전 버전 사용 filter:alpha(opacity=x) . 낮은 값은 요소가 더 투명하게 (100) -은 x는 0의 값을 취할 수 있습니다.
예 2 - 이미지의 투명도 - 효과를 가져 가면
이미지 위에 마우스 :
CSS의는 다음과 같습니다 :
예
img
{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
»그것을 자신을 시도 제 CSS 블록은 1 또, 사용자가 이미지 중 하나를 가리킬 때 발생해야하는 추가 실시 예에서 코드와 유사하다. 사용자가 가리킬 때이 경우 우리는 이미지가 투명하지 싶어요. 이것에 대한 CSS는 opacity:1; .
마우스 포인터가 화상으로부터 멀리 이동할 때, 화상은 다시 투명 할 것이다.
예 3 - 투명 상자의 텍스트
이 투명 상자에 배치되는 텍스트입니다.
소스 코드는 다음과 같습니다 :
예
<html>
<head>
<style>
div.background
{
background: url(/css/klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
»그것을 자신을 시도 첫째, 우리는 생성 <div> 요소 (class="background") 배경 이미지 및 테두리를. 그런 다음 우리는 또 다른 생성 <div> (class="transbox") 첫 번째 내부 <div> . <div class="transbox"> 배경 색상, 테두리가 - 사업부는 투명하다. 투명 내부 <div> 우리는 내부의 텍스트 추가 <p> 요소를.