前端HTML关于背景图片的使用

钱端攻城狮

已于 2022-03-01 08:43:28 修改

阅读量1.2k

点赞数 2

分类专栏： HTML 文章标签：前端 html

于 2022-02-28 21:01:48 首次发布

本文链接：https://blog.csdn.net/m0_54932975/article/details/123192195

版权

HTML 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.one{
				width: 300px;
				height: 300px;
				border: 20px dashed gold;
				padding: 30px;
				margin: 0 auto;
				/*2.设置背景图片url地址链接*/
				background-image: url(img/1.png);
				/*2.设置图片屏平铺效果
				 图片小于标签尺寸 就会自动平铺充满整个标签
				 repeat-x 仅x轴方向平铺
				 repeat-y 仅y轴方向平铺
				 no-reoeat 不平铺
				 */
				background-repeat: no-repeat;
				/*3.设置背景图片的位置
				 默认left top
				 可以设设置方位词 center right bottom left等
				 可以直接设置px像素值 以及百分比%值
				 */
				background-position: center;
				/*4.background-size 背景图片尺寸
				 a.px数值
				 b.百分比 参考当前标签宽度
				 c.cover 按照比例缩放图片 .cover会让图片充满整个容器
				 有可能造成图片无法显示完整
				 d.contain 按照比例缩放图片. contain按照比例缩放图片
				 只要宽或者高一个方向铺满容器 就立刻停止缩放 有可能造成内容留白
				 
				 */
				background-size: contain ;
				/*5.background-origin
				 完整的第一张图片的开始位置
				 a.border-box 从边框位置开始
				 b.padding-box 从padding位置开始
				 c.content-box 从内容位置开始
				 */
				background-origin: border-box;
				/*6.裁剪 background-clip： 开始裁剪的位置
				 a.border-box 从边框位置之外的部分裁剪
				 b.padding-box 把padding之外的部分裁剪
				 c.content-box 把宽高之外的部分裁剪掉
				 */
				background-clip: content-box;
				/*以上综合写法*/
				/*background: url(img/1.png) no-repeat center content-box;*/
				/*注意 尺寸最好单独设置*/
				/*background-size: conver;*/
			}
			.two{
				background: url(img/1.png) no-repeat center content-box;
				/*注意 尺寸最好单独设置*/
				background-size: contain;
			}
		</style>
	</head>
	<body>
		<div class="one">
			<h1>hi，girl！</h1>
		</div>
		<div class="two">
			<h1>hi，girl！</h1>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述