masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial css > CSS+html如何实现背景图片的填充详解

CSS+html如何实现背景图片的填充详解

黄舟
Lepaskan： 2017-07-22 09:16:52
asal
5483 orang telah melayarinya

引言：

今天想写个人的欢迎界面，又折腾起了前端，然而真的捉急呀

为了美观点，花多点时间吧，又是凌晨三点了0.0

CSS实现单张背景图片的填充

实现方式一：

直接使用body元素的background-image属性，多个浏览器兼容，基本满足要求

添加background-color: #22C3AA;在加载图片前显示颜色

BUG：页面太小时下方会留有空隙

详细属性w3school里面的background属性

<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
<html>    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
<title>hello world</title>    

<style type="text/css">
body {
	margin: 0;
	background-image: url(&#39;bg.jpg&#39;);  
	background-repeat:no-repeat;
        background-position:0% 0%;
  	background-size:cover;
	background-color: #22C3AA;
}
</style>

</head>    
<body>
</body>    
</html> </span>
Salin selepas log masuk

实现方式二：

使用p，图片能自适应浏览器的大小，不会出现body的bug

BUG：IE11不兼容，下方会有一个绿线(body背景颜色)，十分不美观

参见：HTML中使背景图片自适应浏览器大小

<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
<html>    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
<title>hello world</title>    

<style type="text/css">
body {
	margin: 0;	
	background-color: #22C3AA;
}
</style>

</head>    
<body>
<!--
<p id="Layer1" style="position:absolute; width:100%; height:100%; background-color: #22C3AA; z-index:-1" >    
<img src="3-bg.jpg" height="100%" width="100%"/>    
</p>
-->
</body>    
</html> </span>
Salin selepas log masuk


Atas ialah kandungan terperinci CSS+html如何实现背景图片的填充详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
背景图片
sumber：php.cn
Artikel sebelumnya：CSS滚动条样式如何兼容IE8和Chrome浏览器？ 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
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1335
Penukaran automatik PX kepada ralat REM  <style>html {   font-size: calc(100vw / 3.75);      }badan {    saiz fon: 0.16rem; ...
daripada 2024-04-16 09:34:16
0
0
4687
Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
daripada 2024-04-06 21:58:04
0
1
800
Ubah suai gaya CSS sebaris secara dinamik dalam Javafx Saya cuba menukar imej latar belakang anak tetingkap apabila aplikasi dimaksimumkan. Latar...
daripada 2024-04-06 20:57:16
0
1
487
Bagaimana untuk membuat elemen terapung disusun secara menegak dan bukannya secara mendatar dalam CSS? Saya cuba membuat halaman web dengan dua lajur, dengan kandungan utama di satu pihak dan k...
daripada 2024-04-06 20:45:26
0
2
386
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