【css】展示背景图片的底部部分

利用背景图的background-position  实现

 demo

方法一：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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设置背景图像是否固定或者随着页面的其余部分滚动。

 效果：

 

 

posted on   smile轉角  阅读(426)  评论(0)  编辑  收藏  举报

相关博文：
· 【css】box-shadow 阴影
· 【其他】查看Animate.css官网动画没有效果
· css - background
· CSS 之背景图片平铺 与 object-fit
· CSS-background 背景图片
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

导航

统计

点击右上角即可分享
微信分享提示