So legen Sie mit CSS fest, ob das Hintergrundbild wiederholt wird oder nicht-Front-End-Fragen und Antworten-php.cn

So legen Sie mit CSS fest, ob das Hintergrundbild wiederholt wird oder nicht

醉折花枝作酒筹

Freigeben： 2021-08-13 14:30:39

Original

2909 Leute haben es durchsucht

Im vorherigen Artikel haben wir die Methode zum Positionieren des Hintergrundbilds von Elementen kennengelernt. Bitte lesen Sie „Erhalten Sie das Hintergrundbild von CSS-Positionierungselementen mit einem Trick.“ Dieses Mal erfahren Sie, wie Sie das Hintergrundbild auf Wiederholung einstellen. Bei Bedarf können Sie darauf zurückgreifen.

Wenn wir ein Hintergrundbild haben, wie legen wir die Kachelmethode dieses Hintergrundbilds fest?

Schauen wir uns zuerst eine kleine Kastanie an und nehmen wir den Code aus dem vorherigen Artikel.

<style>
    div{
      background-image: url("images/3.jpg");
      background-repeat:no-repeat;
      background-position:left;
    }
  </style>
</head>
<body><div>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
</div>
</body>

Nach dem Login kopieren

Dieses Ergebnis ist

So legen Sie mit CSS fest, ob das Hintergrundbild wiederholt wird oder nicht

Wir können sehen, dass das Hintergrundbild in diesem kleinen Beispiel immer dieses war, aber die Häufigkeit, mit der das Bild angezeigt wird, hat sich geändert. Was ist der Grund? Wie Sie sehen, haben wir den Wert des Attributs „Hintergrundwiederholung“ geändert. Heute werden wir über dieses Attribut sprechen.

background-repeat-Eigenschaft legt fest, ob und wie das Hintergrundbild wiederholt werden soll. Das Hintergrundbild kann sich entlang der horizontalen Achse, der vertikalen Achse, beiden Achsen oder überhaupt nicht wiederholen. Standardmäßig wiederholt sich das Hintergrundbild horizontal und vertikal. Wiederholte Bilder werden auf die Größe des Elements zugeschnitten, können aber skaliert (mit round) oder gleichmäßig verteilt (mit space) werden.

background-repeat属性设置是否及如何重复背景图像。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。默认地，背景图像在水平和垂直方向上重复。重复的图像被剪裁为元素的大小，但它们可以缩放 (使用round) 或者均匀地分布 (使用space)。

该属性从原图像开始重复，原图像由background-image定义，并根据background-position的值放置。

在这个属性中一共有四个属性值，分别是repeat，repeat-x，repeat-y和no-repeatDieses Attribut wiederholt sich vom Originalbild, das durch background-image definiert und entsprechend dem Wert von background-position platziert wird.

Es gibt vier Attributwerte in diesem Attribut, nämlich repeat, repeat-x, repeat-y und no - wiederholen. Unter diesen bedeutet „Wiederholung“, dass sich das Hintergrundbild in vertikaler und horizontaler Richtung wiederholt; „Wiederholung“ bedeutet, dass sich das Hintergrundbild in horizontaler Richtung wiederholt; wiederholen bedeutet, dass das Hintergrundbild nicht wiederholt wird und nur einmal erscheint. Empfohlenes Lernen:

CSS-Video-Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonSo legen Sie mit CSS fest, ob das Hintergrundbild wiederholt wird oder nicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!