CSS实现网页背景图片自适应全屏详解-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

CSS实现网页背景图片自适应全屏详解

小云云

Feb 07, 2018 am 09:12 AM

cssimej latar belakang

本文主要和大家介绍CSS实现网页背景图片自适应全屏的方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

网页背景自适应全屏.PNG

一张清晰漂亮的背景图片能给网页加分不少，设计师也经常会给页面的背景使用大图，我们既不想图片因为不同分辨率图片变形，也不希望当在大屏的情况下，背景有一块露白，简而言之，就是实现能自适应屏幕大小又不会变形的背景大图，而且背景图片不会随着滚动条滚动而滚动。

以下是用CSS实现的方法：

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>title</title>
</head>
<body>
<p class="wrapper">
    <!--背景图片-->
    <p id="web_bg" style="background-image: url(./img/bg.jpg);"></p>
    <!--其他代码 ... -->
</p>
</body>
</html>

CSS：

#web_bg{
  position:fixed;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  min-width: 1000px;
  z-index:-10;
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}

下面，我们来分析一下，css中每句代码的作用是什么：

  position:fixed;
  top: 0;
  left: 0;

这三句是让整个p固定在屏幕的最上方和最左方

width:100%;
height:100%;
min-width: 1000px;

上面前两句是让整个p跟屏幕实现一模一样的大小，从而达到全屏效果，而min-width是为了实现让屏幕宽度在1000px以内时，p的大小保持不变，也就是说在这种情况下，缩放屏幕宽度时，图片不要缩放（只有在1000px以内才有效）。

z-index:-10;

这个的目的是让整个p在HTML页面中各个层级的下方，正常情况下，第一个创建的层级z-index的值是0，所以如果我们这里写成-1也可以实现，不过这里写-10是确保整个p在最下面，因为如果页面中层级太多了，有的时候用-1不一定在最下面，但如果写成-100这样大数字的也没有什么意义。用index:-10 以此能达到看上去像背景图片，其实是一个最普通的p，只是层级关系变了，才让人看上去看是背景图片。

background-repeat: no-repeat;

上面这个是背景不要重复

background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;

上面三句是一个意思，就是让图片随屏幕大小同步缩放，但是有部分可能会被裁切，不过不至于会露白，下面两句是为chrome和opera浏览器作兼容。

background-position: center 0;

上面这句的意思就是图片的位置，居中，靠左对齐。

相关推荐：

CSS3教程(5):网页背景图片_css3_CSS_网页制作

JS实现让网页背景图片斜向移动的方法_javascript技巧

网页背景图片全屏设置_html/css_WEB-ITnose

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 Berkaitan

Bagaimana kami menandakan font Google dan mencipta goofonts.comApr 12, 2025 pm 12:02 PM

Goofonts adalah projek sampingan yang ditandatangani oleh isteri pemaju dan suami pereka, kedua-duanya peminat besar tipografi. Kami telah menandakan Google

Artikel Web Dev yang tidak berkesudahanApr 12, 2025 am 11:44 AM

Pavithra Kodmad meminta orang ramai untuk membuat cadangan mengenai apa yang mereka fikir adalah beberapa artikel yang paling abadi mengenai pembangunan web yang telah mengubahnya

Perjanjian dengan elemen seksyenApr 12, 2025 am 11:39 AM

Dua artikel diterbitkan pada hari yang sama:

Amalkan pertanyaan GraphQL dengan keadaan API JavaScriptApr 12, 2025 am 11:33 AM

Belajar bagaimana untuk membina API GraphQL boleh menjadi agak mencabar. Tetapi anda boleh belajar cara menggunakan API GraphQL dalam 10 minit! Dan ia berlaku saya ' ve mendapat yang sempurna

CMSS peringkat komponenApr 12, 2025 am 11:09 AM

Apabila komponen tinggal di persekitaran di mana pertanyaan data memisahkannya tinggal berdekatan, terdapat garis langsung yang cukup antara komponen visual dan

Tetapkan jenis pada bulatan ... dengan laluan mengimbangiApr 12, 2025 am 11:00 AM

Di sini ' s beberapa CSS Trickery dari Yuanchuan. Terdapat CSS Property Offset-Path. Suatu ketika dahulu, ia dipanggil gerakan-jalan dan kemudian ia dinamakan semula. I