Html Css 图像悬停不透明度变化和文本出现而文本不透明度也改变了吗？

Question

我想要它，这样当我将鼠标悬停在图像上时，文本的显示方式与我的显示方式相同，只是它的不透明度不变。

示例:http://jsfiddle.net/guineapig101/UEtLJ/

html:

<a class="img1"><p class="hoverText">yoooo</p></a>

CSS:

html,body{
width: 100%;
height: 100%;
background-color: #000;
}

p{
color: #fff;
font-size: 16px;
font-family: arial, arial black, italic;
}
.hoverText{
text-align: center;
visibility: hidden;
position: relative;
}
.img1{
position: absolute;
background-image: url('http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-       3.jpg');
top: 0px;
left:0px;
width: 30%;
height: 40%;
}
.img1:hover p{
visibility: visible;
z-index: 9000;
}
.img1:hover{
cursor: pointer;
opacity: 0.6;
-webkit-transition: opacity;
-webkit-transition-property: opacity;
-webkit-transition-duration: 500ms;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: initial;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

Answer 1

您不能影响背景图像的不透明度。您通常必须在 HTML 中使用实际图像，而不是纯粹用于样式目的的非语义额外元素，您可以使用像这样的伪元素来管理它。

JSfiddle

CSS

html,body{
    width: 100%;
    height: 100%;
   background-color: #000;
}

p{
    color: #fff;
    font-size: 16px;
    font-family: arial, arial black, italic;
}
.hoverText{
    text-align: center;
    visibility: hidden;
    position: relative;
}

.img1:hover .hoverText{
    visibility: visible;
    cursor: pointer;
}

.img1{
    position: absolute;
    top: 0px;
    left:0px;
    width: 30%;
    height: 40%;
}
.img1:before {
    content:"";
    position: absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-image: url('http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-3.jpg');
    transition:opacity.5s ease;
}
.img1:hover:before {
    opacity:0.6;
}