CSS3中background-size实现背景图片大小可自定义的几种效果（代码实例）-css教程-PHP中文网

首页

web前端

css教程

CSS3中background-size实现背景图片大小可自定义的几种效果（代码实例）

易达

Jun 08, 2020 pm 03:50 PM

css3

本文目标：

1、掌握background-size背景图片大小的几种设置方法

问题：

1、实现以下效果，使用纯DIV+CSS，必须使用background-size

实现效果.png

附加说明：

1、背景图片大小本身是500*300大小

2、div容器宽度600*300大小

3、要求整体居中显示

现在来具体操作

1、准备素材：根目录创建images文件夹，把相关素材图片都存放与此，素材有

2、创建好index.html，写好架构，架构如何分析呢

思路分析：

1、目标由5个div组成，每个div的背景图片都是一样的，只不过背景图片的呈现方式不同

2、每个div都带有一个标题

根据分析，我们得出以下代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>背景图片大小background-size演示</title>
</head>
<body>
    <div class="container">
        <h4>原样显示背景图片</h4>
        <div class="demo bg1"></div>
        <h4>300宽和100高显示背景图片</h4>
        <div class="demo bg2"></div>
        <h4>80%宽和60%高显示背景图片</h4>
        <div class="demo bg3"></div>
        <h4>背景图片填充整个容器</h4>
        <div class="demo bg4"></div>
        <h4>背景图片扩充到容器的一边即可</h4>
        <div class="demo bg5"></div>
    </div>
</body>
</html>

3、写样式，创建css文件夹，里面新建index.css，里面的样式怎么写了，以下是分析思路

思路分析：

1、.container *

思路分析

1、为了设置容器里的所有元素的公共样式，我们可以将这些公共代码写入.container * 样式内

所以index.css中添加代码如下：

.container *{
    padding:0;
    margin:0;
}

2、.demo

思路分析：

1、根据要求得知宽600，高300，所以转成代码即width:600px;height:300px;背景图片是爱莎，且不重复所以background: url(../images/as.jpg) no-repeat;带边框所以

border: 1px solid #999;要居中所以margin: 0 auto 10px auto;

所以index.css中添加代码如下：

.demo {
    background: url(../images/as.jpg) no-repeat;
    width: 600px;
    height: 300px;
    border: 1px solid #999;
    margin: 0 auto 10px auto;
}

3、标题h4

思路分析：

1、要求文本居中，所以转成代码即 text-align: center;、

所以index.css中添加代码如下：

h4{
    text-align: center;
}

4、5种不同的显示方式

思路分析：

1、第一种方式就是默认的方式，就是背景图片多大，就显示多大

2、第二种方式就是自定义固定宽高的方式显示，要求背景图片按照宽300，高100显示

3、第三种方式就是按照自定义百分比的方式显示，要求按照背景图片容器div的宽*80%,高*60%显示（即背景图片最终宽=600*80%=480,高=300*60%=180）

4、第四种方式就是让背景图片填充整个div，这里要注意的是，如果背景图片宽<容器的宽，那么背景图片就会等比例增长，直到填满了容器，如果高度增长到大于容器的高度，那么超出容器的部分就会被隐藏，只显示容器大小的部分

5、第五种方式就是将背景图片等比缩放至某一条边填满了容器的一条边为止

这里要要注意一点，除了第2种，第三种，不是等比例扩展图片，其他的几个都是等比例扩展背景图直到符合条件即停止扩展

所以index.css中添加代码如下：

.bg1 {
    background-size: auto;
}

.bg2 {
    background-size: 300px 100px;
}

.bg3 {
    background-size: 80% 60%;
}

.bg4 {
    background-size: cover;
}

.bg5 {
    background-size: contain;
}

到此为止，index.css的全部内容如下：

.container *{
    padding:0;
    margin: 0;
}
.demo {
    background: url(../images/as.jpg) no-repeat;
    width: 600px;
    height: 300px;
    border: 1px solid #999;
    margin: 0 auto 10px auto;
}
h4{
    text-align: center;
}
.bg1 {
    background-size: auto;
}

.bg2 {
    background-size: 300px 100px;
}

.bg3 {
    background-size: 80% 60%;
}

.bg4 {
    background-size: cover;
}

.bg5 {
    background-size: contain;
}

然后将index.css引入index.html中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景图片大小background-size演示</title>
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>
    <div class="container">
        <h4>原样显示背景图片</h4>
        <div class="demo bg1"></div>
        <h4>300宽和100高显示背景图片</h4>
        <div class="demo bg2"></div>
        <h4>80%宽和60%高显示背景图片</h4>
        <div class="demo bg3"></div>
        <h4>背景图片填充整个容器</h4>
        <div class="demo bg4"></div>
        <h4>背景图片扩充到容器的一边即可</h4>
        <div class="demo bg5"></div>
    </div>
</body>
</html>

运行效果如下：

实现效果.png

到此为止，我们就实现了全部的需求

总结：

1、background-size主要用来设置背景图片的大小，语法格式如下：

background-size:auto|固定宽和高|百分比宽和高|cover|contain

以上是CSS3中background-size实现背景图片大小可自定义的几种效果（代码实例）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

我最近找到了一种动态更新任何产品图像的颜色的解决方案。因此，只有一种产品之一，我们可以以不同的方式对其进行着色以显示

每周平台新闻：第三方代码，被动混合内容，连接最慢的国家的影响Apr 15, 2025 am 11:19 AM

在本周的综述中，灯塔在第三方脚本上阐明了灯光，不安全的资源将在安全站点上被阻止，许多国家连接速度

托管您自己的非JavaScript分析的选项Apr 15, 2025 am 11:09 AM

有很多分析平台可帮助您跟踪网站上的访问者和使用数据。也许最著名的是Google Analytics（广泛使用）

它全部都在头上：管理带有React头盔的React Power Site的文档头Apr 15, 2025 am 11:01 AM

文档负责人可能不是网站上最迷人的部分，但是其中所处的内容对于您的网站的成功也一样重要

JavaScript中的Super（）是什么？Apr 15, 2025 am 10:59 AM

当您看到一些称为super（）的JavaScript时，在子类中，您会使用super（）调用其父母的构造函数和超级。访问它的

比较不同类型的本机JavaScript弹出窗口Apr 15, 2025 am 10:48 AM

JavaScript具有各种内置弹出API，它们显示用于用户交互的特殊UI。著名：

为什么可访问的网站如此难以构建？Apr 15, 2025 am 10:45 AM

前几天，我与一些前端人们聊天，讲述了为什么这么多公司努力创建可访问的网站。为什么可访问的网站如此艰难

'隐藏”属性显然很弱Apr 15, 2025 am 10:43 AM

有一个HTML属性，它可以正是您认为应该做的：

See all articles

热AI工具

热工具

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中

SublimeText3汉化版

中文版，非常好用

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具，用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

SublimeText3 英文版

推荐：为Win版本，支持代码提示！

mPDF

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），

显示更多

CSS3中background-size实现背景图片大小可自定义的几种效果（代码实例）

本文目标：

问题：

现在来具体操作

总结：

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

DVWA

SublimeText3汉化版

螳螂BT

SublimeText3 英文版

mPDF

热门话题

CSS3中background-size实现背景图片大小可自定义的几种效果（代码实例 ）

本文目标：

问题：

现在来具体操作

总结：

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

DVWA

SublimeText3汉化版

螳螂BT

SublimeText3 英文版

mPDF

热门话题

CSS3中background-size实现背景图片大小可自定义的几种效果（代码实例）