Heim > Web-Frontend > Front-End-Fragen und Antworten > Bringen Sie Ihnen einen Trick bei, um die Größe des CSS-Hintergrundbilds anzupassen

Bringen Sie Ihnen einen Trick bei, um die Größe des CSS-Hintergrundbilds anzupassen

醉折花枝作酒筹
Freigeben: 2021-08-13 15:33:28
Original
3301 Leute haben es durchsucht

Im vorherigen Artikel haben wir erfahren, wie man das Hintergrundbild so einstellt, dass es wiederholt wird. Bitte lesen Sie „So verwenden Sie CSS, um festzulegen, ob das Hintergrundbild wiederholt wird oder nicht.“ Dieses Mal erfahren Sie, wie Sie die Größe des Hintergrundbilds festlegen. Bei Bedarf können Sie darauf zurückgreifen.

Was sollen wir tun, wenn wir möchten, dass das Hintergrundbild in unserer Hand den gesamten Bildschirm einnimmt?

Werfen wir einen Blick auf Little Chestnut.

<style>
    div{
      background-image: url("images/3.jpg");
      background-repeat:no-repeat;
      background-size: 400px;
    }
  </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

Das Ergebnis dieses kleinen Beispiels ist

Bringen Sie Ihnen einen Trick bei, um die Größe des CSS-Hintergrundbilds anzupassen

Sie können sehen, dass, wenn wir den Wert eines bestimmten Attributs ändern, auch der Hintergrund größer wird, wenn sich der Wert ändert. Worauf achten wir also bei diesem Attribut? Sie können sehen, dass wir den Wert des Attributs „Hintergrundgröße“ geändert haben.


Dann werfen wir einen Blick auf die Bedeutung dieses Attributs. Das Attribut


background-size gibt die Größe des Hintergrundbilds an. Das Bild kann seine ursprünglichen Abmessungen beibehalten oder auf eine neue Größe gestreckt oder skaliert werden, um es an die Größe des verfügbaren Platzes des Elements anzupassen und dabei seine ursprünglichen Proportionen beizubehalten.

Werfen wir einen Blick auf die Syntax dieses Attributs.


background-size: length|percentage|cover|contain;
Nach dem Login kopieren

Ich habe gerade eine Tabelle zur Erklärung dieses Werts erstellt, Sie können einen Blick darauf werfen.


Bringen Sie Ihnen einen Trick bei, um die Größe des CSS-Hintergrundbilds anzupassen

Empfohlenes Lernen:

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen einen Trick bei, um die Größe des CSS-Hintergrundbilds anzupassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage