css如何改变背景图片大小

青灯夜游
Freigeben: 2021-10-12 18:13:28
Original
26801 Leute haben es durchsucht

在css中,可以使用background-size属性来改变背景图片大小,该属性的作用就是指定背景图片大小,可通过将属性值设置为长度值或百分比来改变图片大小,或者通过将属性值设置为cover和contain关键字来对图片进行伸缩处理。

css如何改变背景图片大小

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在CSS中,想要改变背景图片的大小,可以通过设置background-size属性来实现。

background-size属性可以指定背景图片大小。语法格式:

background-size: length|percentage|cover|contain;
Nach dem Login kopieren
  • length 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 auto(自动)

  • percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)"

  • cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

  • contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

background-size属性可通过长度值或百分比来设置图片大小,或者通过cover和contain来对图片进行伸缩设置。

示例:

     
  

原始背景图片大小

本身这个图片宽度为400px,高度225px


通过CSS修改背景图片大小,图片宽度为200px,高度112px

Nach dem Login kopieren

效果图:

1.png

(学习视频分享:css视频教程

Das obige ist der detaillierte Inhalt voncss如何改变背景图片大小. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
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
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!