CSS (4): Hintergrundverformung

• Hintergrund-Ursprung

Legen Sie die ursprüngliche Startposition des Hintergrundbilds des Elements fest. Sie müssen sicherstellen, dass die Hintergrundwiederholung „No-Repeat“ ist
, damit dieses Attribut wirksam wird.
Mögliche Werte sind border-box |. padding-box |

Rahmenbox: Legen Sie den Ursprung des Hintergrundbilds auf die obere linke Ecke des Rahmens fest

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    background-repeat:no-repeat;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-origin:border-box;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">}
</span><span style="color: #008080;">6</span> 
<span style="color: #008080;">7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

padding-box: Legen Sie den Ursprung des Hintergrundbilds auf die obere linke Ecke des Innenrands fest

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    background-repeat:no-repeat;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-origin:padding-box;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">}
</span><span style="color: #008080;">6</span> 
<span style="color: #008080;">7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

Inhaltsfeld: Legen Sie den Ursprung des Hintergrundbilds auf die obere linke Ecke des Inhaltsbereichs fest

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    background-repeat:no-repeat;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-origin:content-box;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">}
</span><span style="color: #008080;">6</span> 
<span style="color: #008080;">7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

Hintergrundclip

Legen Sie den Bereich fest, in dem das Hintergrundbild nach außen beschnitten wird.

Mögliche Werte sind border-box |. padding-box |
Rahmenbox: Stellen Sie den Zuschneidebereich so ein, dass er innerhalb des Rahmens liegt, einschließlich des Rahmens

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    background-clip:border-box;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">}
</span><span style="color: #008080;">5</span> 
<span style="color: #008080;">6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

padding-box: Stellen Sie den Zuschneidebereich so ein, dass er innerhalb der Polsterung liegt, einschließlich Polsterung

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    background-clip:padding-box;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">}
</span><span style="color: #008080;">5</span> 
<span style="color: #008080;">6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

Inhaltsfeld: Legen Sie den Zuschneidebereich auf den Inhaltsbereich fest

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    background-clip:content-box;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">}
</span><span style="color: #008080;">5</span> 
<span style="color: #008080;">6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

transformieren

Ändern Sie die Größe, Transparenz, den Drehwinkel, die Verzerrung usw. des Elements.

Syntax:

transform: none |. Der erste Parameter entspricht der X-Achse und der zweite Parameter entspricht der Y-Achse. Wenn der zweite Parameter nicht angegeben wird, ist der Standardwert 0
transform-origin: Jedes Element hat einen Mittelpunkt. Standardmäßig liegt sein Mittelpunkt bei 50 % der X-Achse und der Y-Achse des Elements .
TranslateX(): Geben Sie die Übersetzung der X-Achse des Objekts (horizontale Richtung) an.
TranslateY(): Geben Sie die Übersetzung der Y-Achse des Objekts an (vertikale Richtung).
Rotate(): Geben Sie die 2D an Für die Drehung des Objekts (2D-Rotation) muss zunächst das Attribut <' transform-origin '> definiert werden: Geben Sie den 2D-Maßstab des Objekts an (2D-Skalierung). Der erste Parameter entspricht der X-Achse und der zweite Parameter entspricht der Y-Achse. Wenn der zweite Parameter nicht angegeben wird, wird standardmäßig der Wert des ersten Parameters verwendet
skew(): Gibt die Objekt-Skew-Transformation (schräge Verzerrung) an. Der erste Parameter entspricht der X-Achse und der zweite Parameter entspricht der Y-Achse. Wenn der zweite Parameter nicht angegeben wird, ist der Standardwert 0
translator3d(): Gibt die 3D-Verschiebung des Objekts an. Der erste Parameter entspricht der X-Achse, der zweite Parameter entspricht der Y-Achse und der dritte Parameter entspricht der Z-Achse. Parameter dürfen nicht weggelassen werden

Übersetzen: Versetzen Sie das Element um 50 % zur X-Achse bzw. Y-Achse

transform-origin: Setzt den Mittelpunkt des Elements auf Position 0 0, also die obere linke Ecke

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform: translate(50%,50%);
</span><span style="color: #008080;">6</span> <span style="color: #000000;">}
</span><span style="color: #008080;">7</span> 
<span style="color: #008080;">8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

translateX: Nur den Versatz der X-Achse festlegen

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform-origin:0 0;
</span><span style="color: #008080;">6</span> <span style="color: #000000;">    transform: translate(50%,50%);
</span><span style="color: #008080;">7</span> <span style="color: #000000;">}
</span><span style="color: #008080;">8</span> 
<span style="color: #008080;">9</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

translateY: Nur den Offset der Y-Achse festlegen

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform: translateX(50%);
</span><span style="color: #008080;">6</span> <span style="color: #000000;">}
</span><span style="color: #008080;">7</span> 
<span style="color: #008080;">8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

drehen: Stellen Sie das Element auf 2D-Rotation ein. Der akzeptierte Parameter ist der Winkel (Grad)

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform: translateY(50%);
</span><span style="color: #008080;">6</span> <span style="color: #000000;">}
</span><span style="color: #008080;">7</span> 
<span style="color: #008080;">8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

Skalierung: Legen Sie fest, dass das Element dreimal skaliert werden soll. Die akzeptierten Parameter sind numerische Werte, die den Vergrößerungsfaktor angeben

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform: rotate(180deg);
</span><span style="color: #008080;">6</span> <span style="color: #000000;">}
</span><span style="color: #008080;">7</span> 
<span style="color: #008080;">8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

Neigung: Stellen Sie den Neigungswinkel des Elements ein

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform: scale(3);
</span><span style="color: #008080;">6</span> <span style="color: #000000;">}
</span><span style="color: #008080;">7</span> 
<span style="color: #008080;">8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

translate3d: Legen Sie die 3D-Verschiebung des Elements fest

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform: skew(60deg);
</span><span style="color: #008080;">6</span> <span style="color: #000000;">}
</span><span style="color: #008080;">7</span> 
<span style="color: #008080;">8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform: translate3d(50px,50px,1px);
</span><span style="color: #008080;">6</span> <span style="color: #000000;">}
</span><span style="color: #008080;">7</span> 
<span style="color: #008080;">8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>