惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

C
Check Point Blog
有赞技术团队
有赞技术团队
博客园 - 三生石上(FineUI控件)
博客园_首页
博客园 - 【当耐特】
WordPress大学
WordPress大学
月光博客
月光博客
博客园 - 叶小钗
S
SegmentFault 最新的问题
雷峰网
雷峰网
H
Help Net Security
宝玉的分享
宝玉的分享
A
About on SuperTechFans
IT之家
IT之家
J
Java Code Geeks
Hugging Face - Blog
Hugging Face - Blog
D
DataBreaches.Net
酷 壳 – CoolShell
酷 壳 – CoolShell
博客园 - 聂微东
T
The Blog of Author Tim Ferriss
B
Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Y
Y Combinator Blog

博客园 - smile轉角

【js】ES5,ES6继承是如何实现的 【js】setTimeout、Promise、Async/Await 的区别 【面试题】思维逻辑方面 【js】js内置对象Error(错误机制) 【TS】学习笔记 【js】CommonJS、AMD、CMD三种规范 【其他】查看Animate.css官网动画没有效果 【vue3】父子组件通信之 vue3 defineProps,defineEmits ,defineExpose 【js】JS严格模式有什么特点 【css】使用弹性盒子布局时,省略号问题 【vue】 Failed to load resource: the server responded with a status of 404 (Not Found) 【第三方】富文本调研 【js】元素是否在可视区范围内 【js】json的相关操作 【vue3】资料 【html】 svg 【html5】html5中input 标签 type值为range时,修改其默认css 【js】forEach,for...in,for...of 区别 【js】map,reduce,filter的区别
【css】展示背景图片的底部部分
smile轉角 · 2022-09-02 · via 博客园 - smile轉角

利用背景图的background-position  实现

 demo

方法一:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				position:relative;
				width:200px;
				height:200px;
				border:1px solid red;
				background:url(../images/heightbig.jpg) no-repeat scroll  0 -232px ;
				background-size:100%;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

原图

 效果:

方法二(推荐):

.box{
    position:relative;
    width:200px;
    height:200px;
    border:1px solid red;
    background:url(../images/heightbig.jpg) no-repeat;
    background-size:100%;
    background-position: bottom;
}

拓展:

 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

 效果: