Question

我对CSS＆amp; Wordpress，我整晚都在努力寻找解决方案 - 所以希望你能帮助我。

我有这个图像，当有人在它上面盘旋时，我希望中间的白色/透视部分从底部到顶部填充颜色＃f7ca18

http://wp.tek-monkey.com/wp-content/uploads/2015/06/circle1_test_seethrough.png

我尝试过以下尝试从白色/透视内部到我想要的颜色的简单过渡，但是它们都没有效果。我不确定我是否在wordpress中做错了什么;在外观＆gt;编辑器下我将css代码粘贴在底部，然后在带有图像的页面上我编辑图像并输入框（图像CSS类）.circle-test例如。

.circle-test {
  background: #ffffff;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
}
.circle-test:hover {
  background: #f7ca18;
}

.circle-test:hover{
    background-color: #f7ca18;
}

.circle-test{
    background:none;
}

.circle-test:hover{
    background:#f7ca18;
}

Answer 1

完全可行。这样做的诀窍是添加100％的边界半径以在图像周围创建一个圆。以下是三种方法。

Codepen

我也裁剪过＆amp;重新导出图像，使其成为完美的275像素正方形（如果您需要在不规则形状的图像上进行bg过渡，则可以查看SVG）。非常欢迎您下载该图片并使用它！

我很快就这样做了，所以如果你有任何问题请告诉我！

＆＃13;

/* Option 1: Image only */
.circle-test {
  display: block;
  margin: 0 auto;
  border-radius: 100%;
  background-image: url('http://www.heavilyedited.com/hands-temp.png');
  background-repeat: no-repeat;
  -webkit-transition: background 1s linear;
  -moz-transition: background 1s linear;
  transition: background 1s linear;
}

.circle-test:hover {
  background-color: #f7ca18;
}

/* Option 2: Div with background image*/
.circle-test2 {
  display: block;
  width: 275px;
  height: 275px;
  margin: 0 auto;
  border-radius: 100%;
  background-image: url('http://www.heavilyedited.com/hands-temp.png');
  background-repeat: no-repeat;
  transition: background 1s linear;
}

.circle-test2:hover {
  background-color: #1D9B8D;
}

/* Option 3: Image is inside div*/
.circle-test3 {
  display: block;
  width: 275px;
  height: 275px;
  margin: 0 auto;
  border-radius: 100%;
  background-image: url('http://www.heavilyedited.com/hands-temp.png');
  background-repeat: no-repeat;
  -webkit-transition: background 1s linear;
  -moz-transition: background 1s linear;
  transition: background 1s linear;
}

.circle-test3:hover {
  background-color: #00aeef;
}

＆＃13;

<!-- Option 1: Image only -->
<img src="http://www.heavilyedited.com/hands-temp.png" class="circle-test"/>

<!-- Option 2: Div with background image -->
<div class="circle-test2">
</div>

<!-- Option 3: Image is inside div-->
<div class="circle-test3">
  <img src="http://www.heavilyedited.com/hands-temp.png" />
</div>

＆＃13;

在悬停

1 个答案: