How to add a semi transparent box over background image but under text inside div?

问题

This is what I currently have:

<div class="square">
   <div id="wrapper">
      <h2>Text</h2>
      <h3>Text</h3>
   </div>
</div>

.square {
    padding: 10px;
    width: 150px;
    height: 150px;
    margin-right:50px;
    margin-bottom: 30px;
    display: inline-block;
    background: url('image.png');
    vertical-align: top;
    cursor: pointer;
    position: relative;
}

#wrapper {
    position: absolute;
    bottom: 5px;
    width: 150px;
    max-height: 150px;
    overflow: hidden;
}

Now I want to make a semi transparent black box appear when .square is hovered over, but I can't quite figure out how to do it :( I need it to essentially darken the background to make the and text more readable when the box is hovered over, so it needs to somehow be above the background image but below the text.

Can anyone help? Thanks

回答1:

If #wrapper covers the whole background image too you can add

#wrapper:hover{
   background-color:rgba(0,0,0,0.5);
}

To get the background to do a half second fade add

-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-ms-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;

to #wrapper:hover

You can allso add the transition css to #wrapper to get a fade on mouseout.

At http://css3generator.com/ there is a nice css3 generator to generate css for transitions and alot more.

回答2:

Do you mean something like this?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
.square {
    padding: 10px;
    width: 150px;
    height: 150px;
    margin-right:50px;
    margin-bottom: 30px;
    display: inline-block;
    background: url('image.png');
    vertical-align: top;
    cursor: pointer;
    position: relative;
}

#wrapper {
    position: absolute;
    bottom: 5px;
    width: 150px;
    height: 150px;
    overflow: hidden;
}

#wrapper:hover {
    background: rgba(0,0,0,.3);
}
</style>

</head>
<body>

<div class="square">
   <div id="wrapper">
      <h2>Text</h2>
      <h3>Text</h3>
   </div>
</div>

</body>
</html>

来源：https://stackoverflow.com/questions/16399900/how-to-add-a-semi-transparent-box-over-background-image-but-under-text-inside-di

标签

html

css

image

background

hover