Implementieren Sie mehrere dynamische Hintergrundsimulationsgrenzen

Dieses Mal werde ich Ihnen die Implementierung simulierter dynamischer Grenzen mit mehreren Hintergründen vorstellen. Was sind die Vorsichtsmaßnahmen für die Realisierung simulierter dynamischer Grenzen mit mehreren Hintergründen?

Werfen wir zunächst einen Blick auf die zu erreichenden Renderings

Implementierungsmethode Wie folgt

Das erste, was mir einfiel, war das Randattribut, aber das Randattribut kann die Länge nicht festlegen. Bei der Implementierung mit Rahmen müssen andere Elemente zur Simulation verwendet werden, was problematischer ist. Dann fiel mir plötzlich ein, dass ich jemanden gesehen hatte, der mehrere CSS3-Hintergründe verwendet hatte, um Grenzen im Internet zu simulieren, also probierte ich es aus.

CSS3-Hintergrund

CSS3 hat einige Änderungen am Hintergrund vorgenommen. Die offensichtlichste besteht darin, mehrere Hintergründe festzulegen, wodurch nicht nur 4 hinzugefügt werden neue Attribute hinzugefügt und auch die aktuellen Attribute angepasst und erweitert.

1. Mehrere Hintergrundbilder

In CSS3 können Sie mehrere Hintergrundbilder in einem Tag-Element anwenden. Der Code ähnelt der CSS2.0-Version, die referenzierten Bilder müssen jedoch durch Kommas getrennt werden. Das erste Bild ist der Hintergrund, der oben im Element positioniert ist, und nachfolgende Hintergrundbilder werden der Reihe nach darunter angezeigt, wie folgt:

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

2. Neues Attribut: Hintergrundclip

Diese Diskussion bringt uns zurück zu dem am Anfang des Artikels erwähnten Thema über die Hintergrundblockierung durch die Grenze. Durch das Hinzufügen von „background-clip“ haben wir die vollständige Kontrolle über die Position der Hintergrundanzeige.

Die Attributwerte lauten wie folgt:

background-clip: border; Der Hintergrund wird unter dem Randrand angezeigt

background-clip: padding; beginnt unter dem Innenabstand statt unter dem Rand anzuzeigen

background-clip: content Der Hintergrund beginnt unter dem Inhaltsbereich, nicht unter dem Rand oder dem Innenabstand.

background-clip: no-clip; Standardattributwert, ähnlich wie background-clip: border;

3. Neues Attribut: Hintergrundursprung

Dieses Attribut muss in Verbindung mit background-position verwendet werden. Mit „background-position“ können Sie die Positionierung anhand des Randes, der Polsterung oder des Inhaltsbereichs von Inhaltsboxen berechnen. (Ähnlich wie bei „background-clip“)

background-origin: border; >

Hintergrundursprung: Inhalt; ausgehend von der Position des Inhaltsbereichs der Inhaltsbox

Der Unterschied zwischen Hintergrundclip und Hintergrundursprung wird von der Website www.CSS3 gut analysiert und erklärt. Infos.

4. Neues Attribut: Hintergrundgröße

Das Attribut „Hintergrundgröße“ wird zum Zurücksetzen Ihres Hintergrundbilds verwendet.

hat mehrere Attributwerte:

Hintergrundgröße: enthalten; Reduzieren Sie das Hintergrundbild, um es an das Etikettenelement anzupassen (hauptsächlich das Pixelverhältnis).

Hintergrundgröße: Abdeckung ; Lassen Sie das Hintergrundbild auf die gesamte Etikettenelementgröße vergrößern (hauptsächlich das Pixelverhältnis)

Hintergrundgröße: 100px 100px Geben Sie die Größe des zu skalierenden Hintergrundbilds an

Hintergrundgröße: 50 % 100 %; Der Prozentsatz basiert auf der Größe des Inhalts-Tag-Elements, um die Größe des Bildes zu skalieren

Eine einfache Fallbeschreibung finden Sie auf der Website mit den CSS 3-Spezifikationen.

5. Neue Attribute: Hintergrundumbruch

In CSS3 können Beschriftungselemente in verschiedene Bereiche unterteilt werden (z. B. lassen Sie das Inline-Element mehrere Zeilen umfassen). Hintergrund – Das Break-Attribut kann den Hintergrund steuern, der in verschiedenen Bereichen angezeigt wird.

Attributwert:

Hintergrundunterbrechung: kontinuierlich; Dieses Attribut ist der Standardwert und ignoriert die Lücken zwischen Bereichen (das Anwenden von Bildern auf sie ist so, als würden sie als ein Bereich behandelt)

Hintergrund-Break: Bounding-Box; Überdenken Sie den Abstand zwischen Regionen

     Background-break: each-box; 对每一个独立的标签区域进行背景的重新划分。

6、背景颜色的调整

     background-color属性在css3版本里面稍微做了增强，除了指定background color背景颜色之外，还可以对不使用的标签元素背景图片进行去色处理。

     background-color: green / blue;此例子里，这背景颜色可能是绿色，然而，如果底部背景图片无效的话，蓝色将代替绿色来显示。如果你没有指定某个颜色的话，它将其视为透明。

7、背景重复的调整

css2里当设置背景的时候，它经常被标签元素截取而显示不全，css3介绍了2个新属性来修复此问题。 space：图片以相同的间距平铺且填充整个标签元素 round：图片自动缩放直到适应且填充整个标签元素

CSS 3 specifications网站对background-repeat: space的使用就是一个现成的例子。

8、Background Attachment 的调整

Background Attachment有了一个新属性值:local,当标签元素滚动时它才有效(如设置overflow:scroll;)，当background-attachment设置为scroll时，背景图片是不随内容滚条滚动的。现在，有了background-attachment:local，就可以做到让背景随元素内容滚动而滚动了。

css3 多背景模拟元素边框

我们这里主要使用了background-img、background-size 和 background-position 三个属性。

background-image: [background-image], [background-image], [background-image]; 
background-position: [background-position], [background-position], [background-position]; 
background-repeat: [background-repeat], [background-repeat], [background-repeat];

简写形式如下：

background: [background-image] [background-position] [background-repeat], 
[background-image] [background-position] [background-repeat], 
[background-image] [background-position] [background-repeat];

现在我们用多背景来模拟一个元素的边框

/*CSS*/
.exammple {
    background: linear-gradient(0, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-90deg, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-180deg, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-270deg, #108b96 2px, #108b96 2px) no-repeat;
    background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
    background-position: left top, right top, right bottom, left bottom;
}

<p class="exammple"></p>

我们用四个渐变的背景来模拟四个边框（为什么我们要用渐变而不是直接的Color呢？这是由于Css的多背景只能是background-image, background-color不支持多个值,所有即便是纯色的边框，我们也只能使用渐变）。

接下来我们让边框动起来

/*CSS*/
.exammple {
    transition: ease-in .3s;
    background: linear-gradient(0, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-90deg, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-180deg, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-270deg, #108b96 2px, #108b96 2px) no-repeat;
    background-size: 0 2px, 2px 0, 0 2px, 2px 0;
    background-position: left top, right top, right bottom, left bottom;
}
.exammple:hover {
    background-size: 100% 2px,  2px 100%, 100% 2px, 2px 100%;
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

设置滚动条样式

CSS的居中布局总结

Css3的之形状总结

三种绝对定位元素的水平垂直居中的办法

Das obige ist der detaillierte Inhalt vonImplementieren Sie mehrere dynamische Hintergrundsimulationsgrenzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!