龙空技术网

css实现图片右上角加图标(方式一)

天天编码大龄人 41

前言:

当前咱们对“css图片上加图片”大约比较讲究,你们都想要学习一些“css图片上加图片”的相关内容。那么小编在网上收集了一些关于“css图片上加图片””的相关知识,希望看官们能喜欢,同学们一起来了解一下吧!

利用绝对定位实现

<!DOCTYPE html><html><head><title>CSS学习</title><style>html { color-scheme: light dark; }body { width: 35em; margin: 0 auto;font-family: Tahoma, Verdana, Arial, sans-serif; }.plus {    position: absolute;    font-size: 20px;    height: 20px;    width: 20px;    top: -20%;    right: -23%;    text-align: center;    background-color: #2196F3;    line-height: 15px;    border-radius: 50%;    color: white;    /* left: 50%;    top:-50%; */}</style></head><body>    <div class="container" style="margin: 20px;position: relative;width:100px;height: 100px;">        <img src="; style="width: 100%;height: auto;"/>        <div class="plus" id="plus">+</div>    </div>    <div><button id="hidden">hidden</button></div>    <div><button id="show">show</button></div></body><script>    const button = window.document.getElementById("hidden");    button.addEventListener("click",function(evt){        window.document.getElementById("plus").style.display="none";    });    const showButton = window.document.getElementById("show");    showButton.addEventListener("click",function(evt){        window.document.getElementById("plus").style.display="block";    });    </script></html>

标签: #css图片上加图片