html CSS的background相关内容

最新推荐文章于 2023-12-15 16:23:47 发布

郭庆汝

最新推荐文章于 2023-12-15 16:23:47 发布

阅读量103

点赞数

本文链接：https://blog.csdn.net/guoqingru0311/article/details/118694339

版权

CSS的background相关内容

基础知识点：
1、示例一：
示例二：
示例三：
- background实现雪碧图的效果：
二：background实现背景图的适配
- 未适配前：
- 适配后：

基础知识点：

在这里插入图片描述

1、示例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background相关内容</title>
    <style type="text/css">
        .box{
            width: 400px;
            height: 200px;
            border: 5px solid black;
            margin: 50px auto 0;

            background-image:url("images/bg.jpg") ;
            /*
                repeat-x：只平铺x轴方向
                repeat-y：只平铺y轴方向
                no-repeat:只平铺一次
                repeat:缺省值，平铺一次

            */

            /*
                水平方向：left center right
                垂直方向：top center botton

            */

            /*background-repeat: repeat-x ;   !*表示只平铺x轴方向*!*/
            background-repeat: no-repeat ;   /*表示只平铺x轴方向*/
            /*background-position: left center;*/
            background-position: 10px -30px;    /*设置图片所在位置*/

            background: url("images/bg.jpg") 50px 50px no-repeat cyan;

        }

    </style>
</head>
<body>
    <div class="box">
<!--        <img src="images/bg.jpg" alt="图像" title="图像">-->
        html背景图片
    </div>
</body>
</html>

在这里插入图片描述

示例二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>36_background实现盒子的背景</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            border: 5px solid black;
            margin: 50px auto 0;
            background: url("images/location_bg.jpg") no-repeat 10px 10px;
        }
    </style>
</head>
<body>
    <<div class="box"></div>
</body>
</html>

显示效果如下所示：
在这里插入图片描述

示例三：

background实现雪碧图的效果：

在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background实现雪碧图的效果</title>

    <style type="text/css">
        .list{
            width: 300px;
            height:305px ;
            list-style: none;   /*去除掉列表前的样式*/
            text-indent: 50px;  /*设置首行缩进50px*/
            margin: 40px auto 0;
            /*background: url("#") palegoldenrod;*/
        }
        .list li{
            height: 60px ;
            line-height: 60px;
            border-bottom: 2px dotted black;
            background: url("images/bg01.png") 0px 10px no-repeat lightgoldenrodyellow;
        }

        .list .info_1{
            background-position: 0px -71px;
        }
        .list .info_2{
            background-position: 0px -150px;
        }
        .list .info_3{
            background-position: 0px -234px;
        }
        .list .info_4{
            background-position: 0px -314px;
        }
    </style>
</head>
<body>
        <ul class="list">
            <li >《电影名称》</li>
            <li class="info_1">《盗墓笔记》</li>
            <li class="info_2">《啪啪啪》</li>
            <li class="info_3">《哒哒哒》</li>
            <li class="info_4">《哈哈哈》</li>
        </ul>
</body>
</html>

显示效果如下：
在这里插入图片描述

二：background实现背景图的适配

在这里插入图片描述

未适配前：

在这里插入图片描述
显示效果如下所示：

适配后：

在这里插入图片描述
显示效果如下所示：

代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图尺寸的设置</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            border: 2px solid black;
            margin: 50px auto 0;

            background: url("./images/apple.png") no-repeat;

            /*设置背景图尺寸的大小--方式一*/
            background-size: 200px 200px;       /*设置背景图尺寸的大小*/

            /*设置背景图尺寸的大小--方式二*/
            /*background-size: 50% 50%;*/
        }
    </style>
</head>
<body>
    <div class="box">嗯呢呢</div>
</body>
</html>

郭庆汝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html CSS的background相关内容

CSS的background相关内容基础知识点：1、示例一：示例二：示例三：background实现雪碧图的效果：基础知识点：1、示例一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>background相关内容</title> <style type="text/css"> .box
复制链接

扫一扫