Latest web development tutorials

CSS 이미지 투명 / 불투명

CSS를 사용하여 투명한 이미지를 쉽게 만들 수 있습니다.

참고 : CSS 불투명도 속성은 W3C CSS3 권장 사항의 일부입니다.

예

더 많은 예제

투명한 이미지 만들기 - 효과를 가져

텍스트 상자를 만들기 투명한 배경의 이미지가

예 1 - 투명 이미지 만들기

CSS3 속성에 투명도불투명하다.

첫째, 우리는 어떻게 CSS와 투명한 이미지를 만드는 방법을 보여줍니다.

표준 이미지

klematis에

투명도와 같은 이미지 :

klematis에

다음 CSS를 생각해 볼 수 있습니다 :

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

IE9는, 파이어 폭스, 크롬, 오페라, 사파리 브라우저는 이미지의 투명도 특성이 불투명해질 수 있습니다 사용합니다. 1.0-0.0에서 불투명도] 속성 값입니다. 값이 작을 요소가 더 투명합니다.

알파 (불투명도 = x)를 : IE8 및 이전 버전 필터를 사용합니다. 100 - X는 0의 값을 취할 수 있습니다. 낮은 값은 요소가 더 투명합니다.

예 2 - 이미지의 투명도 - 효과를 가져

이미지 위에 마우스를 이동 :

klematis에klematis에

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 */
}

첫 번째 블록은 실시 예 1의 CSS 코드 등이다. 또한, 우리는 사용자가 이미지 중 하나에 마우스 마우스 오버를 이동할 때 발생했다. 사용자가 이미지 위에 마우스를 이동이 경우, 우리는 사진이 분명하다 바랍니다.

불투명도 = 1:이 CSS이다.

IE8 및 이전 버전사용 : 필터 : 알파 (불투명도 = 100 ).

마우스가 화상으로부터 멀리 포인터 때 이미지를 다시 투명 할 것이다.

예 3 - 투명 상자 텍스트

투명 상자에 텍스트입니다. 투명 상자에 텍스트입니다. 투명 상자에 텍스트입니다. 투명 상자에 텍스트입니다. 투명 상자에 텍스트입니다. 투명 상자에 텍스트입니다. 투명 상자에 텍스트입니다. 투명 상자에 텍스트입니다. 투명 상자에 텍스트입니다. 투명 상자에 텍스트입니다. 투명 상자에 텍스트입니다. 투명 상자에 텍스트입니다. 투명 상자에 텍스트입니다.

다음과 같이 소스 코드는 다음과 같습니다

<html>
<head>
<style>
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
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.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>

첫째, 우리는 배경 이미지 및 테두리를 가진 div 요소의 고정 높이와 폭을 만듭니다. 그런 다음 우리는 첫 번째 사업부 내부의 작은 DIV 요소를 만듭니다. 이것은 또한 고정 폭, 배경색 테두리가 DIV - 그것은 투명하다. 투명 사업부의 내부에서, 우리는 P 요소 내에 텍스트를 추가합니다.