CSS背景

最新推荐文章于 2022-10-30 18:01:18 发布

FreeSpider公众号

最新推荐文章于 2022-10-30 18:01:18 发布

阅读量124

点赞数

分类专栏： HTML与CSS 文章标签： CSS HTML

本文链接：https://blog.csdn.net/weixin_40612082/article/details/80377310

版权

HTML与CSS 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

CSS背景

如下结构图，清晰描绘出关于CSS背景的相关属性及操作：

背景图片应用实例：

将110px*150px的背景图片放在100px*100px的外框中，并实现右图的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .bj{
            /* 定义宽高 */
            width: 100px;
            height: 100px;
            /* 外框 */
            border: 2px solid aqua;
            /* 背景图片 */
            background-image: url("./images/location_bg.jpg");
            /* 居中对齐 */
            margin: 50% auto;
            /* 将背景图片移动到合适位置 */
            background-position-x: 175px;
            background-position-y: 108px;

            

        }
    </style>
</head>
<body>
    <div class="bj">
        <!-- 啥也不用写 -->
    </div>
</body>
</html>

最终实现效果如下：（最终实现的效果如果和题目要求不一样可以调整背景图片的位置，以达到要求）