Question

我希望图像具有黑色不透明度，并且在完全悬停在红色上时它会像图像一样变成简单的圆圈，请解释如何操作。示例图片https://www.dropbox.com/s/xhqlujyapihti71/h3uU2ZHpggU.jpg?dl=0

<div class="row">
            <div id="machinery">
                <h3 class="text-center" id="textPart">Модель  составляющих завода</h3>
                <a href="recycling.php"><div class="partOfMachine" id="recyclingPart" data-namepart="Переработка"></div></a>
                <a href="cutting_lines.php"><div class="partOfMachine" id="cuttingPart" data-namepart="Резка"></div></a>
                <a href="aging_silos.php"><div class="partOfMachine" id="firstAgingPart" data-namepart="Выдержка сырья"></div></a>
                <a href="moulding.php"><div class="partOfMachine" id="blockMouldingPart" data-namepart="Блок-формовочное оборудование"></div></a>
                <a href="expanding.php"><div class="partOfMachine" id="expandingPart" data-namepart="Предвспениватели"></div></a>
                <a href="aging_silos.php"><div class="partOfMachine" id="secondAgingPart" data-namepart="Выдержка сырья"></div></a>
                <a href="moulding.php"><div class="partOfMachine" id="shapeMouldingPart" data-namepart="Фигурно-формовочное оборудование"></div></a>
            </div>
</div>

我的css是

#machinery{ width: 1140px; height: 500px; background-image: url(../img/zawod.jpg); } .thisPart{ box-shadow: 0px 0px 100px 1px black; } .partOfMachine{ position: relative; width: 130px; height: 130px; border-radius: 100px; display: inline-block; } #recyclingPart{ top: 170px; left: 50px; } #cuttingPart{ top: 245px; left: 110px; } #firstAgingPart{ top: 45px; left: -10px; } #blockMouldingPart{ top: 115px; left: 50px; } #expandingPart{ top: 155px; left: 100px; } #secondAgingPart{ top: 65px; left: 200px; } #shapeMouldingPart{ top: 160px; left: 170px; }

Answer 1

首先，我无法找到代码中图像的位置。但是，通常的做法是在CSS中添加img：hover元素。对于前者如果你的HTML有

<img id="stackoverflow" src="Path" alt="Incase image fails to load">,

然后你可以在你的CSS中添加它，

img:hover {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

或

#stackoverflow:hover {
    opacity: 0.4;
}

Answer 2

如果我理解你的话，你可以尝试使用这样的东西：

示例：http://jsfiddle.net/9b2kL9zw/

首先我们创建公共容器，我们将它用作图像和圆的包含块。然后我们将图像设置为#img div的背景，然后我们为表示圆的div设置相同的图像。之后我们在#img div中设置不透明度（如果代表圆圈的div将在#img div内部，它将由其父级设置不透明度，我们根本不需要它）并集中我们想要的圆形div它出现了。

代码：

HTML：

<div id="container">
  <div id="img">
    </div>
    <div id="circle"></div>
</div>

CSS：

 #container {
   height: 500px;
   width: 400px;
   margin: 2% auto;
   border: 1px solid #5970bb;
   border-radius: 3px;
   box-shadow: 10px 10px 20px rgba(35, 35, 35, 0.50);
   padding: 5px;
   position: relative;
}

 #img {
background: url(http://s14.postimg.org/cdkclcbep/cat.jpg) left top no-  repeat;
  height: 500px;
 width: 400px;
 position: relative;
 opacity: 0.2;
}


#circle {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background: url(http://s14.postimg.org/cdkclcbep/cat.jpg) center top no-repeat;
 -moz-background-size: cover;
 -o-background-size: cover;
 -webkit-background-size: cover;
 background-size: cover;
 position: absolute;
 top: 50%;
 left: 50%;
 -moz-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 -o-transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}

想要在悬停到css背景图像时更改不透明度

2 个答案: