Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des Beispielcodes für den CSS3-Hintergrundstil

Detaillierte Erläuterung des Beispielcodes für den CSS3-Hintergrundstil

高洛峰Original: 2017-03-16 09:47:542102Durchsuche

In diesem Artikel wird der Beispielcode für den CSS3-Hintergrundstil ausführlich erläutert

HintergrundbildZeichnen Sie mehrere BilderÜberlagerung, das Beispiel lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>background-image绘制多张图片叠加</title>
    <style>
        div{
            width:1100px;
            height:800px;
            background-image: url("../../image/icon1.jpg"),url("../../image/border3.jpg");
            background-repeat: repeat-x,no-repeat ;
            background-position:100%,100%,center,center;
            border:5px solid #ff0000;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

background-clip: Gibt den Zeichenbereich des Hintergrunds an:
background-origin: Positioniert den Hintergrundbild:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>background-clip及background-origin属性</title>
    <style>
        /*background-clip:规定背景的绘制区域：*/
        /*background-origin:相对于内容框来定位背景图像：*/
        div{
            background: #fff000;
            font-size: 30px;
            border:10px dashed #0000ff;
            padding:20px;
            background-image: url("../../image/icon.png");
            background-repeat:no-repeat;
        }
        .div2{
            margin-top:30px;
            background-origin: content-box;
            background-clip: content-box;
        }
        .div3{
            margin-top:30px;
            background-origin: border-box;
            background-clip: border-box;
        }
        .div4{
            margin-top:30px;
            background-origin: padding-box;
            background-clip: padding-box;
        }
    </style>
</head>
<body>
<div>这是一段测试文字</div>
<div>这是一段测试文字</div>
<div>这是一段测试文字</div>
<div>这是一段测试文字</div>
</body>
</html>

Das Box-Shadow-Attribut von CSS3:

Lassen Sie ie6, 7 und 8 den Randradius unterstützen, box-shadow und

text-shadow Methode: Verwenden Sie ie-css3.htc

Laden Sie zuerst das Skript ie-css3.htc herunter und fügen Sie es dann dem CSS hinzu:

So verwenden Sie es: Laden Sie es herunter und legen Sie es in Ihrem Serververzeichnis ab

Schreiben Sie den folgenden Code in Ihren 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1:

.box{
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */ 
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ 
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */ 
behavior: url(ie-css3.htc); 
}

Hinweis: Verhalten: ie- in url(ie-css3.htc) Verwenden Sie den absoluten Pfad oder übergeben Sie die css3.htc-Adresse direkt an das Stammverzeichnis der Website, andernfalls sehen Sie den Effekt möglicherweise nicht.

•Wenn Sie diese HTC-Datei verwenden, rendert der IE sie, solange box-shadow, -moz-box-shadow oder -webkit-box-shadow in Ihrem CSS geschrieben ist.

•Wenn Sie diese HTC-Datei verwenden, können Sie nicht „box-shadow: 0 0 10px red“ schreiben, sondern „box-shadow: 0px 0px 10px“. rot; andernfalls schlägt es im IE fehl.
• Alpha-Transparenz in RGBA-Werten wird nicht unterstützt.
•Das Einfügen eines inneren Schattens wird nicht unterstützt.
• Die Schattenerweiterung wird nicht unterstützt.
•Schatten werden im IE nur schwarz angezeigt, unabhängig davon, welche
anderen Farben Sie festlegen. Dieses Skript ermöglicht dem IE jedoch nur die Unterstützung einiger Box-Shadow-Werte.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Beispielcodes für den CSS3-Hintergrundstil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Einführung in die Verwendung von CSS3-Layout-Attribut-FlexNächster Artikel：Detaillierte Einführung in die Verwendung von CSS3-Layout-Attribut-Flex

In Verbindung stehende Artikel

Mehr sehen