Rumah > Artikel > hujung hadapan web > css如何实现背景图电脑端/手机端自适应功能

css如何实现背景图电脑端/手机端自适应功能

一个新手asal: 2017-09-09 13:05:343114semak imbas

css代码：

@charset "utf-8";

*{
	margin: 0px;
	padding: 0px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
}
a{
	text-decoration: none;
}
html{
	width: 100%;
	height: 100%;
	overflow-x:hidden; 
	overflow-y:auto;
}
body{
	width: 100%;
	min-height: 100%;
}
.login-bg{
	 background:url(./bg.png) no-repeat center;
    background-size: cover;
    overflow: hidden;
}

html代码：

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8, target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
</head>
<body class="login-bg">
//你的内容
</body>
</html>

Atas ialah kandungan terperinci css如何实现背景图电脑端/手机端自适应功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

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 sebelumnya：如何在进度条加载后显示页面Artikel seterusnya：css响应式布局是什么

Artikel berkaitan

Lihat lagi