简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > teks badan

教你一招搞定css背景图的大小

醉折花枝作酒筹
Lepaskan： 2021-08-13 15:33:28
asal
3105 orang telah melayarinya

上一篇文章中我们了解了设置背景图重复的方法，请看《如何使用css设置背景图的重复与否》。这次我们来了解一下设置背景图大小的方法，有需要的可以参考参考。

当我们想让我们手中的背景图将整个画面都占住的时候，应该怎么去做呢？

来看一下小栗子吧。

<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>
Salin selepas log masuk

这个小例子的结果是

GIF.gif

可以看到，当我们在改变某一个属性的值时，这个背景也随着值的改变而变大了。那我们在看看这个属性是什么呢？可以看到我们修改的是background-size这个属性的值。

那我们就来看看这个属性的意思吧。

background-size 属性规定背景图像的尺寸。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

来看看这个属性的语法吧。

background-size: length|percentage|cover|contain;
Salin selepas log masuk

这个值的解释，我就直接做成一个表格了，可以去看看。

图片4.png

推荐学习：css视频教程

Atas ialah kandungan terperinci 教你一招搞定css背景图的大小. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
css
sumber：php.cn
Artikel sebelumnya：如何使用css设置背景图的重复与否 Artikel seterusnya：css如何定义网格线大小
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
WordPress 6.0 (add_editor_style) tidak memuatkan style.css dalam editor Gutenberg Saya mengikuti kursus UdemyWordPress untuk mencipta tema blok WordPress tersuai. Saya berj...
daripada 2023-11-12 20:37:50
0
2
261
CSS mendahului sifar untuk perpuluhan yang tidak berfungsi dengan nombor yang besar Baru-baru ini saya menghadapi masalah di mana saya mencipta senarai tersusun dengan lebih ...
daripada 2023-11-07 10:35:53
0
1
236
Ralat Sass: Fail telah dimuatkan: @import '~src/css/quasar.variables.scss', 'quasar/src/css/variables.sass'; Saya menggunakan rangka kerja quasar dan semasa menyusun projek saya, saya mengalami ralat...
daripada 2023-11-06 21:38:55
0
1
219
Bagaimana untuk membenamkan video latar belakang dalam HTML/CSS? Hai semua, baru-baru ini saya menghadapi masalah. Saya cuba untuk menetapkan latar belakan...
daripada 2023-11-06 13:59:13
0
1
240
Bagaimana untuk mendapatkan nilai RGB warna bernama CSS/HTML dalam JavaScript Saya telah mencipta objek Javascript yang dipanggil [name-rgb]. Asas anda:namedColors={Ali...
daripada 2023-11-06 09:05:50
0
2
210
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！