background-size 之 背景图的尺寸设置

这篇具有很好参考价值的文章主要介绍了background-size 之 背景图的尺寸设置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一:background-size参数取值

1.0

1.1

二:实例分析

2.1 参数分析

2.2 代码实例分析


引:background-size: 没有设置任何尺寸时使用图片本身的大小,宽度和高度都是auto默认值

可以用px设置成具体的值,也可以使用百分比

一:background-size参数取值

1.0

    1个值 同时设置宽高
    2个值 分别设置宽高

1.1

1     以px为单位的数字
2     %
3     cover 让背景图片充满这个容器,哪怕图片显示不全也没关系,不在乎
4     contain 让图片完全在容器中显示(等比例缩小)哪怕容器有空白,也没关系

1.2 作用范围

这些属性能够写在一个简单的属性中:background。必须指出background负责元素内容部分的背景,包括padding和border,但不包括margin

二:实例分析

各种不同比例的适配问题,完美适配很少发生

2.1 参数分析

background-size: 100% 50%;  宽度占满屏幕,高度占50%

background-size: 100% 100%; 宽度高度都占满整个屏幕,除非图片完美适配,否则图片会变形

background-size: 100% auto; 宽度占满屏幕,高度自动适配,高度有所牺牲

background-size: auto 100%; 高度占满屏幕,宽度自动适配,宽度有所牺牲

至于是要牺牲宽度还是高度,具体问题具体分析,比如学子的沙发可以裁掉,有的背景图不能裁

background-size: cover;铺满整个容器,多余的部分会被裁掉

background-size: contain;至少有一张完整的图呈现出来,一定会有多余的空间

2.2 代码实例分析

背景图1和背景图2 you红色边框分隔开来

背景图1

背景图2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景图片的尺寸</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			/* 版心尽量清爽一点,就设置宽度与居中 */
			.center {
				width: 900px;
				margin: 0 auto;
			}
			/* 背景图1的相关设置 */
			.pic {
				/* 宽度使用父级的 */
				height: 500px;
				border: 5px solid red;
				/* 加入背景图 */
				background-image: url(img/bg.png);
				/* 尺寸设置 */
				background-size: 600px 300px;
				/* 可以使用百分比,但是宽高都是100%的情况,防止图片变形 */
				background-size: 100% 100%;
				/* 宽度100%,高度自动适配,会牺牲一部分高度 */
				background-size: 100% auto;
				/* 宽度自动适配,高度100%,会牺牲一部分宽度 */
				background-size: auto 100%;
				/* 铺满整个屏幕,多余的部分会被裁掉 */
				background-size:cover; 
				/* 至少有一张完整的图呈现出来,一定会有多余的空间 */
				background-size:contain;
				
			}
			.shucai {
				height: 300px;
				background-image: url(img/carousel-1.jpg);
				background-size: auto 100%;
				/* 与contain是有区别的,注意观察两种值不同的效果 */
				background-size: 100% auto;
				/* 至少有一张完整的图片展现出来 */
				background-size: contain;
				/* 铺满整个容器,多余的部分会被裁掉 */
				/* background-size: cover; */
			}
		</style>
	</head>
	<body>
		<div class="bg1">
			<div class="center">
				<!-- pic这个要设置与背景图相关的样式 -->
				<div class="pic"></div>
			</div>
		</div>
		<div class="bg2">
			<div class="center">
				<!-- pic这个要设置与背景图相关的样式 -->
				<div class="shucai"></div>
			</div>
		</div>
	</body>
</html>

background-size 之 背景图的尺寸设置文章来源地址https://www.toymoban.com/news/detail-403560.html

到了这里,关于background-size 之 背景图的尺寸设置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android Studio设置android:background 属性背景颜色

    除了默认的颜色之外都要自己添加。 添加颜色的操作步骤: 打开 res 文件夹,找 values ,里面有个 colors.xml 的文件。然后在里面定义一些颜色。   完成

    2024年04月28日
    浏览(45)
  • 微信小程序设置背景图的几种方式

    原本在html中可以通过background-image来设置背景图片 但是在wxss中出现 解决方法 1.使用网络图片: 2.base64格式的图片,访问图片转 BASE64 编码 | 菜鸟工具上传图片生成base64 3.使用标签

    2024年02月11日
    浏览(77)
  • 微信小程序中(设置成背景图的几种方式)

    1、使用网络图片 2、使用base64格式图片,访问图片base64编码  将背景图片使用编码base64进行转换, 网址如下: base64图片在线转换工具 - 站长工具 3、使用标签    注意有小朋友可能要用html那一套,使用background-image不适用于微信小程序 background-image: url(\\\"../images/local_image.png\\\")

    2024年04月25日
    浏览(36)
  • 微信小程序中,将一张图设置成背景图的几种方式

    三种方法实现 1、使用网络图片 2、使用base64格式图片,访问图片base64编码  将背景图片使用编码base64进行转换, 网址如下: base64图片在线转换工具 - 站长工具 3、使用标签 注意有小朋友可能要用html那一套,使用background-image不适用于微信小程序 background-image: url(\\\"../images/loc

    2024年02月11日
    浏览(61)
  • CSS background 背景

    background 属性为元素添加背景效果。 它是以下属性的简写,按顺序为: background-color background-image background-repeat background-position background-size background-origin background-clip background-attachment 以下所有示例中的 花花.jpg 图片的大小是 48×48 。 background-color 指定元素的背景色。 背景图片默

    2024年02月11日
    浏览(52)
  • 微信小程序 background多个background背景图叠加以及连写注意事项

    background: url(\\\'https://xxxxxxxx.com\\\') no-repeat top/100% auto,linear-gradient(318deg, #3F0000 0%, #A9143A 100%); 效果: 坑点: 1:多个背景图叠加时(渐变也相当于图片)以逗号分割,越靠前图片叠加时层级越高。网上搜索时发现找到的都是说越靠后层级越高,但我测试的时候确实是越靠前越高。

    2024年02月15日
    浏览(59)
  • uni-app - 实现全屏自适应且不变形背景大图,设置一张图片占满全屏(根据手机或电脑尺寸自动拉伸背景图像),用于页面是一张平铺的大图做背景的情况,全端兼容

    网上的很多文章的教程都有一定问题,要么不会自动适应手机尺寸,要么写一堆 js 判断手机宽高,兼容性极差且代码臃肿。 在 uniapp全端兼容(h5网页 / 支付宝微信小程序 / 安卓苹果app / nvue 等全平台),经常遇到 H5 活动页、营销页、图片背景元素点缀等需求, 需要一张背景

    2024年02月17日
    浏览(231)
  • day40-3d Background Boxes(3D背景盒子转换)

    效果 index.html style.css script.js

    2024年02月15日
    浏览(45)
  • 一键去除图片背景——background-removal-js

    一些JavaScript库和工具可以帮助实现背景去除: OpenCV.js:OpenCV的JavaScript版本,提供了许多计算机视觉功能,包括背景去除。 Jimp:一个用于处理图像的JavaScript库,提供了许多图像处理功能,包括背景去除。 Canvas:HTML5的Canvas API可用于在JavaScript中绘制和处理图像,包括背景去

    2024年01月23日
    浏览(57)
  • CSS中如何实现元素的渐变背景(Gradient Background)效果?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月10日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包