CSS3 새로운 배경 그림 시나리오

Firefox는 한 요소의 ID를 다른 요소의 배경으로 지정하는 것을 지원합니다 - moz-element (#ID), 웹키트 계통 지원 - 웹키트-canvas (xxxx) 는 동적으로 canvas를 배경으로 만듭니다


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <h3>firefox4+</h3>
        <div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
            <p>This box uses the element with the #myBackground1 ID as its background!</p>
        </div>

        <div style="overflow:hidden; height:0;">
            <div id="myBackground1" style="width:1024px; height:1024px; background-image: -moz-linear-gradient(left, red, orange, yellow, white);">
                <p style="-moz-transform-origin:0 0; -moz-transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
            </div>
        </div>
        <hr/>
        <div style="width:400px; height:100px; background:-moz-element(#myBackground2);">
        </div>

        <div style="overflow:hidden; height:0;">
            <button id="myBackground2" type="button">Evil button!</button>
        </div>

    </body>
</html>

firefox4+

This box uses the element with the #myBackground1 ID as its background!

This text is part of the background. Cool, huh?

실행 코드


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            div {
                background: -webkit-canvas(test);
                float:left;
                width: 100px;
                height: 100px;
            }
        </style>
        <script>
            function onLoad() {
                var ctx = document.getCSSCanvasContext("2d", "test", 100, 100);
                ctx.fillStyle = "blue";
                ctx.fillRect(10, 10, 90, 90)
            }

            document.addEventListener("DOMContentLoaded", onLoad);

        </script>
    </head>
    <body>
        <div>     webkit </div>
    </body>
</html>

function onLoad() {
var ctx = document.getCSSCanvasContext("2d", "test", 100, 100);
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 90, 90)
}
document.addEventListener("DOMContentLoaded", onLoad);

는 웹키 계에서만 실행할 수 있음

실행 코드

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

현재 기사가 여러분의 문제를 해결하지 못하는 경우 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 새로운 배경 그림 시나리오

firefox4+

좋은 웹페이지 즐겨찾기