背景图片组合练习

最新推荐文章于 2022-03-07 10:24:12 发布

407指导员

最新推荐文章于 2022-03-07 10:24:12 发布

阅读量201

点赞数 1

分类专栏： CSS3 文章标签： css

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109437503

版权

CSS3 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

背景图片练习

将两个图片简单的组和练习。

注意点

1.两张图片必须放在相同的的div中,div块级元素，会独占一行。

2.两张图片的div大小必须设置一样大，这样相对定位才能起效。相当于在同一个背景板定位，不能拿两块背景板。

3.本质是先搞一张背景板，然后把第一张背景图贴上去盖住背景板，然后再弄一张大小一样的背景板贴上去，背景板透明的，第二张图片放上去，调整位置，盖住第一张图片的部分位置，组和而成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片</title>
    <style>
        .box {
            width: 1024px;
            height: 768px;
            background-image: url(images/bybg.jpg);
            background-repeat: no-repeat;
        }
        .box2 {
            width: 1024px;
            height: 768px;
            background-image: url(images/bybottom.png);
            background-position: center bottom;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box2"></div>
</div>
</body>
</html>

在这里插入图片描述

该图片由如下两个图片组成：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OLuBZZmR-1604236619527)(C:%5CUsers%5Cliuch%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20201101211029511.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gVKTMbUy-1604236619531)(C:%5CUsers%5Cliuch%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20201101211054897.png)]

407指导员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
背景图片组合练习

背景图片练习将两个图片简单的组和练习。注意点1.两张图片必须放在相同的的div中,div块级元素，会独占一行。2.两张图片的div大小必须设置一样大，这样相对定位才能起效。相当于在同一个背景板定位，不能拿两块背景板。3.本质是先搞一张背景板，然后把第一张背景图贴上去盖住背景板，然后再弄一张大小一样的背景板贴上去，背景板透明的，第二张图片放上去，调整位置，盖住第一张图片的部分位置，组和而成。<!DOCTYPE html><html lang="en"><head&
复制链接

扫一扫

专栏目录