css3 배경 투명성에 대한 예

opacity를 사용하여 투명도를 조절하는 것은 배경이 투명할 뿐만 아니라 선택 영역의 문자도 투명해진다는 것을 모두가 알고 있다.
이것은 우리가 원하지 않는 효과이다. 그래서 강력한 css3는 배경만 투명하게 하는 기능을 가지게 되었다
바로 백그라운드:rgba(0,0,0,0.5)입니다.안의 매개 변수는 너무 많은 해석을 할 필요가 없겠지!
앞의 세 가지는 배경색을 제어하고 전신 0은 배경색이 검은색임을 나타낸다.
마지막으로 투명도에 대한 제어입니다. 0.5는 반투명을 나타냅니다!
이 기능을 응용하여 여러분에게 참고할 수 있는 예를 하나 만들었다
모든 코드:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>     </title>

<script type="js/jquery-1.9.2.min.js"></script>

<style type="text/css">

    .child_box{  position:absolute; overflow:hidden; }

    h2{ height:43px; line-height:43px;}

    .box01{left:0;}

    .box02{left:200px;}

    .box03{left:700px;}

    .box04{left:1100px;}

    .text{ position:absolute;text-align:center; background:#000; background:rgba(0,0,0,0.5);   color:#fff; left:0;}

    .clearfix:after{content:".";display:block;height:0;visibility:hidden;clear:both;}

    .clearfix{zoom:1;}

</style>



</head>



<body>

<div class="box">

    <div class="child_box box01">

        <img src="images/pic_01.jpg" />

        <div class="text">

            <h2>   </h2>

            <span class="tip">                    </span>

        </div>

    </div>

    <div class="child_box box02">

        <img src="images/pic_02.jpg" />

        <div class="text">

            <h2>   </h2>

            <span class="tip">                         </span>

        </div>

    </div>

    <div class="child_box box03">

        <img src="images/pic_03.jpg" />

        <div class="text">

            <h2>   </h2>

            <span class="tip">                         </span>

        </div>

    </div>

    <div class="child_box box04">

        <img src="images/pic_04.jpg" />

        <div class="text">

            <h2>   </h2>

            <span class="tip">               </span>

        </div>

    </div>

</div>

<script type="text/javascript">

    $(function(){

        $(".child_box").each(function(index, element) {

            

            var imgH=$(this).children("img").height();

            var imgW=$(this).children("img").width();

            var tipW=$(this).children(".tip").width(imgW);

            var textW=$(this).children(".text").width(imgW);

            var textH=$(this).children(".text").height();

            var boxH=$(this).height(imgH);

            var boxW=$(this).width(imgW);

            $(this).height(imgH);

            $(this).children(".text").css("top",imgH-50+"px");

    

            $(this).hover(function(){

                $(this).children('.text').stop(true,true).animate({"top":imgH-textH},300);

                },function(){

                    $(this).children('.text').stop(true,true).animate({"top":imgH-50},300);

                    })

        });

        

                

    });

</script>

</body>

</html>

ie 브라우저가 i8 이상 버전으로 호환

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

초보자를 위한 간단한 카드 호버 애니메이션

html과 css만 사용하여 만든 매우 간단한 카드 호버 애니메이션을 살펴보겠습니다. css 속성을 알고 있다면 이해할 수 있지만 완전히 초보자라면 css의 기초를 배우는 것이 좋습니다. 1단계: 마크업 즉, HTM...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

css3 배경 투명성에 대한 예

좋은 웹페이지 즐겨찾기