CSS 이미지 투명/불투명
CSS 이미지 투명/불투명
CSS를 사용하여 투명 이미지를 쉽게 만듭니다.
참고: CSS 불투명도 속성은 W3C의 CSS3 권장 사항의 일부입니다.
추가 예제
투명한 이미지 만들기 - 호버 효과
Instances
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<head>
<style>
img
{
opacity:0.4;
filter:alpha(opacity=40); /* 适用 IE8 及其更早版本 */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* 适用 IE8 及其更早版本 */
}
</style>
</head>
<body>
<h1>图片透明度</h1>
<p>opacity 属性通常与 :hover 选择器一起使用，在鼠标移动到图片上后改变图片的透明度：</p>
<img src="https://img.php.cn/upload/article/000/000/015/5c6a756568f26867.jpg" width="150" height="113" alt="klematis">
<img src="https://img.php.cn/upload/article/000/000/015/5c6a757f738b2492.jpg" width="150" height="113" alt="klematis">
<p><b>注意:</b>在 IE 中必须声明 <!DOCTYPE> 才能保证 :hover 选择器能够有效。</p>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
텍스트가 포함된 소유권 만들기 배경 이미지용 투명 상자
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.background
{
width: 500px;
height: 250px;
background: url(https://img.php.cn/upload/article/000/000/015/5c6a756568f26867.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>예제 실행»
온라인 예를 보려면 "예제 실행" 버튼을 클릭하세요
예제 1 - 투명한 이미지 만들기
속성의 투명도 CSS3의 불투명도 .
먼저 CSS로 투명한 이미지를 만드는 방법을 보여드리겠습니다.
일반 이미지:
투명도가 적용된 동일한 이미지:
아래 CSS를 살펴보세요.
{
opacity:0.4;
filter:alpha(opacity=40); IE8 이하 */
}
IE9, Firefox, Chrome, Opera 및 Safari 브라우저는 투명도 속성을 사용하여 이미지를 불투명하게 만듭니다. 불투명도 속성 값의 범위는 0.0 - 1.0입니다. 값이 작을수록 요소가 더 투명해집니다.
IE8 및 이전 버전에서는 필터: 알파(불투명도=x)를 사용합니다. x가 취할 수 있는 값은 0~100이다. 값이 낮을수록 요소가 더 투명해집니다.
예 2 - 이미지 투명도 - 호버 효과
이미지 위로 마우스 이동:
CSS 스타일:
{
opacity:0.4;
filter:alpha(opacity) =40) ; /* IE8 이하 */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100) /* IE8 이하 */
}
첫 번째 CSS 블록은 예제 1의 코드와 유사합니다. 또한 사용자가 이미지 중 하나 위로 마우스를 가져가면 어떤 일이 발생하는지 추가했습니다. 이 경우 사용자가 이미지 위로 마우스를 가져가면 이미지가 선명해지기를 원합니다.
이 CSS는 다음과 같습니다. opacity=1.
IE8 및 이전 사용: filter:alpha(opacity=100).
마우스 포인터가 이미지에서 멀어지면 이미지가 다시 투명해집니다.
예제 3 - 투명한 상자 안의 텍스트
소스 코드는 다음과 같습니다. {
너비:500px; 테두리:2px 단색 검정;
}
div.transbox
{
너비:400px;
높이:180px;
여백:30px 50px;
배경색:#ffffff;
테두리:1px 단색 검정;
불투명도:0.6;
filter:alpha(opacity=60); /* IE8 이하 */
}
div.transbox p
{
여백:30px 40px;
글꼴 두께:굵게;
색상:#000000;
}
</style>
</head>
<body>
<div class = 투명 상자에 배치되는 "배경" 텍스트입니다.
투명 상자에 배치되는 일부 텍스트입니다. .
투명 상자에 들어간 텍스트입니다.
투명 상자에 넣은 텍스트입니다.
배경 이미지가 있는 고정 높이 및 너비 div 요소에 넣은 텍스트입니다. 그리고 국경. 그런 다음 첫 번째 div 안에 더 작은 div 요소를 만듭니다. 이 div에는 고정된 너비, 배경색, 테두리도 있으며 투명합니다. 투명 div 내에서 P 요소 안에 텍스트를 추가합니다.
