马黑黑 发表于 2022-1-23 17:33

挂两个灯笼在上方左右角

本帖最后由 马黑黑 于 2022-1-23 17:56 编辑 <br /><br /><style type="text/css">

.papa { position: relative;}
.denglong1, .denglong2 {
        position: fixed;
        width: 200px;
        height: 200px;
        opacity: 0.5;
}
.denglong1 { left: 0; top: 0; }
.denglong2 { left: calc(100vw - 200px); top: 0; }

</style>
<div class="papa">
    <img class="denglong1"src="https://www.huachaowang.com/data/attachment/forum/202201/23/144742dpfezemfeyjylm4y.jpg" alt="" />
    <img class="denglong2" src="https://www.huachaowang.com/data/attachment/forum/202201/23/144742dpfezemfeyjylm4y.jpg" alt="" />
    <p>祝大家新春快乐万事如意财源滚滚来！</p>
</div>

马黑黑 发表于 2022-1-23 17:35

本帖最后由 马黑黑 于 2022-1-23 17:57 编辑

代码其实很简单：
<style type="text/css">

.papa { position: relative;}
.denglong1, .denglong2 {
        position: fixed;
        width: 200px;
        height: 200px;
        opacity: 0.5;
}
.denglong1 { left: 0; top: 0; }
.denglong2 { left: calc(100vw - 200px); top: 0; }

</style>
<div class="papa">
    <img class="denglong1"src="https://www.huachaowang.com/data/attachment/forum/202201/23/144742dpfezemfeyjylm4y.jpg" alt="" />
    <img class="denglong2" src="https://www.huachaowang.com/data/attachment/forum/202201/23/144742dpfezemfeyjylm4y.jpg" alt="" />
    <p>祝大家新春快乐万事如意财源滚滚来！</p>
</div>

马黑黑 发表于 2022-1-23 17:36

但是页面被入侵了{:4_170:}

马黑黑 发表于 2022-1-23 17:56

图片底部不透明

马黑黑 发表于 2022-1-23 17:59

挂实图要挂个底部透明的才行
实图不能直接挂，要用一个 div 装载，否则会搞乱网页布局

红影 发表于 2022-1-23 19:48

马黑黑 发表于 2022-1-23 17:59
挂实图要挂个底部透明的才行
实图不能直接挂，要用一个 div 装载，否则会搞乱网页布局

挂透明的就行了啊https://pic.imgdb.cn/item/61ed40702ab3f51d9145048d.png

马黑黑 发表于 2022-1-23 19:52

红影 发表于 2022-1-23 19:48
挂透明的就行了啊

你去开个帖子试下

红影 发表于 2022-1-23 19:54

这个代码倒是简洁，直接把两个命令写一起了，只不过分别定位{:4_187:}

马黑黑 发表于 2022-1-23 20:08

红影 发表于 2022-1-23 19:54
这个代码倒是简洁，直接把两个命令写一起了，只不过分别定位

相同属性值的部分可以合起来写，这样节省点劳力{:4_170:}

红影 发表于 2022-1-23 21:30

马黑黑 发表于 2022-1-23 19:52
你去开个帖子试下

我更想去做个你前面那个会动的灯笼啊{:4_173:}

红影 发表于 2022-1-23 21:30

马黑黑 发表于 2022-1-23 20:08
相同属性值的部分可以合起来写，这样节省点劳力

聪明的做法，还可以这样，没想到。

马黑黑 发表于 2022-1-23 21:36

红影 发表于 2022-1-23 21:30
聪明的做法，还可以这样，没想到。

看多了，用多了，就会的

马黑黑 发表于 2022-1-23 21:37

红影 发表于 2022-1-23 21:30
我更想去做个你前面那个会动的灯笼啊

那个也不难，就是多个div嵌套

红影 发表于 2022-1-23 22:32

马黑黑 发表于 2022-1-23 21:36
看多了，用多了，就会的

在黑黑的帖子里涨知识了{:4_187:}

红影 发表于 2022-1-23 22:32

马黑黑 发表于 2022-1-23 21:37
那个也不难，就是多个div嵌套

想加的底图上去，对我来说就有点难{:4_173:}

马黑黑 发表于 2022-1-23 23:39

红影 发表于 2022-1-23 22:32
想加的底图上去，对我来说就有点难

那个纯CSS灯笼就能加两个字

马黑黑 发表于 2022-1-23 23:39

红影 发表于 2022-1-23 22:32
在黑黑的帖子里涨知识了

也许是好事吧

红影 发表于 2022-1-24 12:03

马黑黑 发表于 2022-1-23 23:39
那个纯CSS灯笼就能加两个字

不是加灯笼里，是加背景底图啊{:4_173:}

红影 发表于 2022-1-24 12:04

马黑黑 发表于 2022-1-23 23:39
也许是好事吧

肯定是好事啊，每天看着代码，一点点熟悉它们。

马黑黑 发表于 2022-1-24 14:52

红影 发表于 2022-1-24 12:04
肯定是好事啊，每天看着代码，一点点熟悉它们。

甚好甚好
页: [1] 2 3
查看完整版本: 挂两个灯笼在上方左右角