Html Css图像悬停不透明度变化和文本出现而文本不透明度也没有变化？答案

【问题标题】：Html Css image hover opacity change and text appear without text opacity changing too?Html Css图像悬停不透明度变化和文本出现而文本不透明度也没有变化？
【发布时间】：2014-08-03 17:28:21
【问题描述】：

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

示例：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;
}

【问题讨论】：

您不能影响背景图像的不透明度。您必须在 HTML 中使用实际图像。是时候重组了。

标签： html css image opacity

【解决方案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;
}

【讨论】：

【解决方案2】：

您需要另一个元素来放入图像，以便文本不在您设置不透明度的元素内：

HTML：

<a class="img1"><span></span><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;
    top: 0px;
    left:0px;
    width: 30%;
    height: 40%;
    cursor: pointer;
}
.img1 span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url('http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-3.jpg');
}
.img1:hover p{
    visibility: visible;
    z-index: 9000;
}
.img1:hover{
-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;
}
.img1:hover span {
    opacity: 0.6;
}

演示：http://jsfiddle.net/UEtLJ/3/

【讨论】：