html+css 让图片浮于另一张图片的右下角

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>

<body>
    <div style="width:300px; height:300px;">
        <div style="width:100%; height:100%;background-image:url('./banner1.png'); position:relative;background-repeat: no-repeat;background-size: cover;">
            <div style="width:20%; height:20%;background-image:url('./banner2.png'); position:absolute; bottom:0;right: 0;; background-repeat: no-repeat;background-size: cover;">
            </div>
            </div>
    </div>
</body>

</html>

效果:

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个使用 CSS 实现图片自动切换的代码示例: HTML 代码: ```html <div class="slider"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div> ``` CSS 代码: ```css .slider { position: relative; width: 100%; height: 400px; overflow: hidden; } .slider img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } .slider img:first-child { opacity: 1; } .slider img.active { opacity: 1; } @keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .slider img:not(:first-child) { animation: slide 5s infinite; animation-delay: 1s; } .slider img.active + img { animation: slide 5s infinite; } .slider:hover img { animation-play-state: paused; } ``` 解释: - `.slider` 是包含图片的容器,使用 `position: relative` 来允许子元素使用 `position: absolute` 定位。 - `.slider img` 是需要轮播的图片元素,使用 `position: absolute` 定位在容器的左上角,并设置 `opacity: 0` 以隐藏它们。 - `.slider img:first-child` 是第一张图片,设置 `opacity: 1` 以显示它。 - `.slider img.active` 是当前显示的图片,也是轮播动画要应用到的图片,设置 `opacity: 1`。 - `@keyframes slide` 是定义轮播动画的关键帧,从 `translateX(0)`(不移动)到 `translateX(-100%)`(向左移动 100% 宽度)。 - `.slider img:not(:first-child)` 是除了第一张图片外的所有图片,应用轮播动画,循环播放 5 秒,延迟 1 秒开始。 - `.slider img.active + img` 是当前显示图片的下一张图片,应用轮播动画,循环播放 5 秒。 - `.slider:hover img` 是当鼠标悬停在容器上时暂停动画,使用 `animation-play-state: paused`。 这个实现使用了 CSS 的动画和过渡效果,因此不需要使用 JavaScript。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值