background-image调整大小和位置的方法笔记

山顶的云彩

已于 2022-03-05 11:53:58 修改

阅读量1.9w

点赞数 4

分类专栏：前端 IT 文章标签： css html css3

于 2022-01-26 10:28:24 首次发布

本文链接：https://blog.csdn.net/weixin_51396911/article/details/122696879

版权

前端同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #divtest {
            width: 400px;
            height: 400px;
            background-color: aqua;
            background-image: url("img/2.jpg");
            /*background: url("img/2.jpg") 10% 20% no-repeat;!*图片从左往右移动的百分比大小，从上往下百分比大小，重复方式 换成数值同样如此，在这里没有调整大小的方法*!*/
            background-position: 10% 40%;
            /*这个是按从左往右，从上往下的百分比位置进行调整*/
            background-size: 50% 50%;
            /*按比例缩放*/
            /*background-size: 100px 100px;!*这个是按数值缩放*!*/
            background-repeat: no-repeat;
            /*还有repeat-x,y等*/

        }
    </style>
</head>

<body>
    <div id="divtest"></div>
</body>

</html>

优惠劵

山顶的云彩

关注关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
background-image调整大小和位置的方法笔记

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #divtest { width: 400px; height: 400px; background-color: aqua;.
复制链接

扫一扫