灵活的背景定位

最新推荐文章于 2024-04-12 10:30:24 发布

bluellow

最新推荐文章于 2024-04-12 10:30:24 发布

阅读量202

点赞数

分类专栏： CSS3 文章标签： css3 calc

本文链接：https://blog.csdn.net/bluellow/article/details/52666230

版权

CSS3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果图

这里写图片描述

背景定位方案

background-position
background-origin
calc()

background-position的方案

详细用法参照background-position的用法
提示:background-position:right 20px bottom 10px;
这表示距离右边缘20px ,下边缘10px。

background-origin方案

详细用法参照:background-origin
提示:
background-origin:的参数可以填写
border-box:边框的外沿框
padding-box:内边距的外沿框
content-box:内容区的外沿框

calc()方案

详细用法参照:calc()的用法
calc() = calc(四则运算)
说明：
用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，
例如：width: calc(100% - 10px)；

案例源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>灵活的背景定位</title>
    <style>
        h1{
            text-align: center;;
        }
        div{
            float: left;
            background: rgba(166, 175, 255, 0.98);
            margin: 20px 20px;
            max-width: 200px;
            min-width:  150px;
            min-height: 150px;
            background: url("../images/music_converter.png") no-repeat #58a;
        }
        .div_1{
            background-position: bottom 10px right 20px;
        }
        .div_2{
            background: url("../images/music_converter.png") no-repeat #58a bottom right;
            background-position: bottom 10px right 20px;
        }
        .div_3{
            padding: 0 20px 10px 0;
            max-width: 180px;
            min-width: 130px;
            min-height: 140px;
            background-position: bottom right;
            background-origin: content-box;
        }
        .div_4{
            /*calc的运算符两侧要加空白符，未来可能在calc里面使用关键字，可能包含连字符（即减号）*/
            background-position: calc(100% - 20px) calc(100% - 10px);
        }
    </style>
</head>
<body>
    <article>
        <h1>使图标距离右下角,距离底边10px，距离右侧20</h1>
        <!--background-position方案-->
        <div class="div_1">div_1</div>

        <!--background-position方案 回退方案 万一浏览器不支持position ，会直接在右下角显示-->
        <div class="div_2">div_2 回退方案</div>

        <!--background-origin方案-->
        <div class="div_3">div_3 </div>

        <!-- cal()方案 -->
        <div class="div_4">div_4</div>

    </article>
</body>
</html>

bluellow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
灵活的背景定位

效果图背景定位方案background-positionbackground-origincalc()background-position的方案详细用法参照background-position的用法提示:background-position:right 20px bottom 10px; 这表示距离右边缘20px ,下边缘10px。background-origin方案详细用法参
复制链接

扫一扫