热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

CSS3中如何使用background-size定义背景图片大小

CSS3中如何使用background-size定义背景图片大小?针对这个问题,今天小编总结这篇有关background-size属性的文章,可供感兴趣的小伙伴们参考借鉴

CSS3中如何使用background-size定义背景图片大小?针对这个问题,今天小编总结这篇有关background-size属性的文章,可供感兴趣的小伙伴们参考借鉴,希望对大家有所帮助。

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

CSS3中如何使用background-size定义背景图片大小

附加说明:

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

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

3、要求整体居中显示

现在来具体操作

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

CSS3中如何使用background-size定义背景图片大小

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

思路分析:

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

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

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




    
    


    
原样显示背景图片
300宽和100高显示背景图片
80%宽和60%高显示背景图片
背景图片填充整个容器
背景图片扩充到容器的一边即可

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、标题h5

思路分析:

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

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

h5{
    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;
}
h5{
    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中



    
    
    


    
原样显示背景图片
300宽和100高显示背景图片
80%宽和60%高显示背景图片
背景图片填充整个容器
背景图片扩充到容器的一边即可

运行效果如下:

CSS3中如何使用background-size定义背景图片大小

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

总结:

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

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

上文描述的就是background-size属性的用法,具体使用情况还需要大家自己动手实验使用过才能领会。如果想了解更多相关内容,欢迎关注编程笔记行业资讯频道!


推荐阅读
  • 前端实用的CSS3技巧有哪些
    本文小编为大家详细介绍“前端实用的CSS3技巧有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“前端实用的CSS3技巧有哪些”文章能帮助大家 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • JavaScript中属性节点的类型及应用
    本文深入探讨了JavaScript中属性节点的不同类型及其在实际开发中的应用,帮助开发者更好地理解和处理HTML元素的属性。通过具体的案例和代码示例,我们将详细解析如何操作这些属性节点。 ... [详细]
  • 2023年京东Android面试真题解析与经验分享
    本文由一位拥有6年Android开发经验的工程师撰写,详细解析了京东面试中常见的技术问题。涵盖引用传递、Handler机制、ListView优化、多线程控制及ANR处理等核心知识点。 ... [详细]
  • 自己用过的一些比较有用的css3新属性【HTML】
    web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开 ... [详细]
  • 一篇文章搞定css3 3d效果
    css33d学习心得卡片反转魔方banner图首先我们要学习好css33d一定要有一定的立体感通过这个图片应该清楚的了解到了x轴y轴z轴是什么概念了。首先先给大家看一个小 ... [详细]
  • 怎么用css3实现图片的高斯模糊效果
    小编给大家分享一下怎么用css3实现图片的高斯模糊效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • Python自动化处理:从Word文档提取内容并生成带水印的PDF
    本文介绍如何利用Python实现从特定网站下载Word文档,去除水印并添加自定义水印,最终将文档转换为PDF格式。该方法适用于批量处理和自动化需求。 ... [详细]
  • 如何高效创建和使用字体图标
    在Web和移动开发中,为什么选择字体图标?主要原因是其卓越的性能,可以显著减少HTTP请求并优化页面加载速度。本文详细介绍了从设计到应用的字体图标制作流程,并提供了专业建议。 ... [详细]
  • 从 .NET 转 Java 的自学之路:IO 流基础篇
    本文详细介绍了 Java 中的 IO 流,包括字节流和字符流的基本概念及其操作方式。探讨了如何处理不同类型的文件数据,并结合编码机制确保字符数据的正确读写。同时,文中还涵盖了装饰设计模式的应用,以及多种常见的 IO 操作实例。 ... [详细]
  • Win11扩展卷无法使用?解决扩展卷灰色问题的指南
    本文详细介绍了在Windows 11中遇到扩展卷灰色无法使用时的解决方案,帮助用户快速恢复磁盘扩展功能。 ... [详细]
  • 本文介绍如何使用Python进行文本处理,包括分词和生成词云图。通过整合多个文本文件、去除停用词并生成词云图,展示文本数据的可视化分析方法。 ... [详细]
author-avatar
土豆小妈姐_645
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有