如何在不丢失CSS悬停效果中以前的内容的情况下在div上添加图像_Css

如何在不丢失CSS悬停效果中以前的内容的情况下在div上添加图像

css

如何在不丢失CSS悬停效果中以前的内容的情况下在div上添加图像,css,Css,我希望在div上有一个透明的图像（div包含背景图像+跨距内的几行文本）。在悬停时，我想在这个完整的div（bg image+span）上显示一个透明图像，而不会丢失内容值我面对的是悬停，新图像正在替换我以前的背景图像+span 我想在我的父对象上有这个透明图像（背景图像和文本）这里是我的html内容： <body> <div class="complete"> <div class='image'></div

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

我面对的是悬停，新图像正在替换我以前的背景图像+span

我想在我的父对象上有这个透明图像（背景图像和文本）

这里是我的html内容：

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

关于删除上述内容：我得到了很好的不透明度与我的父母bg图像+跨度。但是我想在我的父div上面有一个透明的图像

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

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

您只能将内容“”与：after和：before伪选择器一起使用。只有一个内容：“”&:after完成了魔术。。only:hover的问题是什么？区别是什么？基本上，您使用的内容是：''和：hover伪选择器，这是不可能的。有关更多信息：

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