7

I am a complete newbie when it comes to HTML and CSS and just building my very first website. I want to create an image that, when hovered, displays text and fades the image to a lower opacity. I've got the fade all worked out, as well as the opacity change. My only issue is that the text, which is contained within the element I want to fade, also fades and I would like to keep it at 100% opacity. I have tried setting opacity to 1 for the text but it does not override the opacity change of its container. For example, I have:

<div class="textbox">

<p class="boxtext">This is the text that will eventually go inside the box. It is blah lljsd iofu isduf iou eiosu dfi eiou sdiofu ioe soidfu oidu foiu foisu doiu eoiusodidfu oei osidfuosdiu ieu oisduf oiueoisu dfoi oiu soifu iod fioeo dfs.</p>

</div>

And also

div.textbox {
background-color: white;
margin-left: 2.5vw;
border: 2px solid lightgray;
width: 15vw;
height: 600px;
float: left;
}

 div.textbox:hover {
background-color: lightgray;
border: 2px solid lightgray;
opacity: 0.5;
}

p.boxtext {
margin: 5% 5%;
}

This creates the hover that I want, but I can't keep the text opacity at 100%.

Edit: Thank you for providing the rgba() solution, this solves the problem. I have another case of the same problem except that there is a background image instead of a solid background color. Is there a similar workaround?

Edit2: Issues with fade breaking after replacing opacity change with a separate transparent .png.

a#imglink1 {
background-image: url('https://www.profilesinhistory.com/wp-content/uploads/2012/11/Apollo-11-NASA-Photograph-Signed-Neil-Armstrong-Michael-Collins-Buzz-Aldrin-200x200.jpg');
width: 200px;
height: 200px;
float: left;
-o-transition: 0.5s;
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}

a#imglink1:hover {
background-image: url('../images/apollo_transparent.png');
-o-transition: 1s;
-ms-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}

a#imglink1:hover p {
visibility: visible;
}
4

1 回答 1

11

由于您使用的是纯色背景色，因此您可以rgba只更改背景/边框的不透明度，而不会影响里面的内容。在您的示例中：

div.textbox:hover {
    background-color: rgba(222,222,222,.5);
    border: 2px solid rgba(222,222,222,.5);
}

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()

对于图像，您可以使用:before和:after淡化这些元素的不透明度来完成淡化：

a#imglink2 {
    width: 200px;
    height: 200px;
    float: left;
    position: relative;
}
a#imglink2 p
{
  position: relative;
  z-index:2;
}

a#imglink2:before
{
background-image: url('http://images2.layoutsparks.com/1/239061/welcome-orange-vintage-design.gif');
  width: 200px;
  height: 200px;
  position: absolute;
  top:0; left:0;
  content:'';
  z-index:1;
  opacity:1;
  transition: .3s opacity linear;
}
a#imglink2:after
{
    background-image: url('http://images.all-free-download.com/images/graphicmedium/vintage_christmas_background_32295.jpg');
    width: 200px;
    height: 200px;
    position: absolute;
    top:0; left:0;
    content:'';
    z-index:1;
    opacity:0;
    transition: .3s opacity linear;
}
a#imglink2:hover:before
{
    opacity:0;
}
a#imglink2:hover:after
{
    opacity:1;
}

http://codepen.io/seraphzz/pen/ikJqB

于 2013-06-05T15:27:14.190 回答