Question

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

我面临的是悬停，新图像正在替换我之前的背景图像+跨度。

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

这是我的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图像+ span得到了很好的不透明度。但我希望在父div之上有这个透明的图像？

JS fiddle link

Answer 1

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;
        }

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

1 个答案: