如何在div上添加图像而不丢失CSS悬停效果中的先前内容

debugcn 发表于 Dev

阿杰

我想在div上有一个透明图像（div包含背景图像+跨度内有几行文本）。在悬停时，我想在此完整的div（bg image + span）上显示透明图像，而不会丢失内容值。

我所面临的是悬停，新图像替换了我以前的背景图像+跨度。

我想在我的父母身上得到这个透明图像（背景图像和带有文本的跨度）。

这是我的html内容：

<body>
       <div class="complete">
            <div class='image'></div>
            <span>Vaseline Gel.</span>
        </div>
</body>

这是我的CSS：

.complete{
            width: 400px;
            height: 400px;
            margin: 40px 0px 0px 100px;
            text-align: center;
            color: #000000;
            font-size: 2.2em;
            border-radius: 6px;
            border: 1px solid #00FF00;
        }

        .image{
            background: url('http://www.menucool.com/slider/prod/image-slider-4.jpg');
            background-size: 100% 100%;
            width: 100%;
            height: 90%;
            border-radius: 6px;
        }
        .complete:hover{
            cursor: pointer;
            font-size: 2.2em;
            opacity: 0.8;
            content: url('http://ih0.redbubble.net/image.14048374.7727/sticker,375x360.u5.png');
         }

关于删除上述内容：我的父bg图像+跨度得到很好的不透明度。但我想在我的父div上方放置此透明图像？

JS小提琴链接

约翰·韦德

http://codepen.io/anon/pen/uozpm/

要在图像上方显示另一个背景图像，您可以使用绝对定位将其覆盖。

    .complete {
        width:400px;
        height:400px;
        margin:40px 0 0 100px;
        text-align:center;
        color:#000;
        font-size:2.2em;
        border-radius:6px;
        border:1px solid #0F0;
        position:relative;
        }
    .complete:hover:after {
        content:'';
        position:absolute;
        left:0;
        top:0;
        height:400px;
        width:400px;
        cursor:pointer;
        font-size:2.2em;
        opacity:.8;
        background:url(http://ih0.redbubble.net/image.14048374.7727/sticker,375x360.u5.png) center top no-repeat;
    }

    .image {
        background:url(http://www.menucool.com/slider/prod/image-slider-4.jpg);
        background-size:100% 100%;
        width:100%;
        height:90%;
        border-radius:6px;
        }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。