用图片填满整个div并使整个div成为可点击的链接

Question

用图片填满整个div并使整个div成为可点击的链接

3

我有一个圆形的div，我想用一张图片填充它，并使整个图片/ div可通过鼠标点击(href)并更改鼠标指针为手型光标。

我查看了一些示例，并尝试了以下内容，但它没有将图像加载到div中。我还想在悬停时缩小图像。

请问如何实现这个效果？

<div class="circleDiv">
    <a href='#'></a>
</div>

.circleDiv{
  position: relative;
  background-color: #09f;
  margin: 30px 70px 30px 70px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
}

.circleDiv a{
  background: url("path_to_image") no-repeat right center;
}

- usert4jju7

6个回答

2

您可以使用以下方法使整个DIV可点击（而不是其中的元素）：

<div class="circleDiv" role="button" onClick="location.href='stackoverflow.com'">

将以下CSS添加到div类中（仅更改鼠标指针）：

cursor: pointer;

- Shady Alset

1

我已经更新了你的js fiddle 你需要为img添加:hover，以及将border radius添加到img或wrapper中。仅在wrapper中添加它还需要将overflow设置为hidden。

- noa-dev

你好 noa-dev - 我遇到了另一个问题，与从单击的 div 开始向页面填充背景颜色有关。我已经在这里创建了一个问题- http://stackoverflow.com/questions/36232064/html-grow-transition-image-color-to-fill-entire-web-page 。如果您乐意帮忙，请告诉我。 - usert4jju7

1

只需将以下内容添加到 .circleDiv a 中。

.circleDiv a{
  ...

  display: block;
  height: 100%;
  width: 100%;
}

- smnbbrv

谢谢smnbbrv。我已经在 https://jsfiddle.net/7avvwreq/ 上更新了一个可用的图像。如果我放一个正方形的图像，整个图像就变成正方形而不是保持圆形。图像不会缩小到 div 的大小。你能帮忙解决一下吗？ - usert4jju7

1

Try this :

<a href='https://www.google.fr/'>
   <div class="circleDiv">
   </div>
</a>

.circleDiv{
   position: relative;
   margin: 30px 70px 30px 70px;
   width: 250px;
   height: 250px;
   border-radius: 50%;
   background: url("path_to_image") no-repeat right center;
   cursor: pointer;
 }

- Thomas Gueguen

1

看起来很有趣，是使用clip的好时机:)我创建了一个小例子，但没有做太多更改。使用clip可以避免当鼠标到达圆形边缘时出现奇怪的指针变化。

.circleDiv {
   position: relative;
   background-color: #09f;
   margin: 30px 70px 30px 70px;
   width: 250px;
   height: 250px;
   border-radius: 50%;
   overflow: hidden;
}

.circleDiv a {
   background: url('https://placeimg.com/500/500/animals') no-repeat center;
  background-size: fill;
  display: block;
  width: 250px;
  height: 250px;
  -webkit-clip-path: circle(125px at center);
  clip-path: circle(125px at center);
}

/* hover style, could be animated */
.circleDiv a:hover {
  background-size: contain;
}

Fiddle链接

- claicham

很酷的东西。谢谢 :) - usert4jju7

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- geeksal · Accepted Answer

您可以通过使用background-size、background-position、display和:hover伪类来实现您的目标。这是相同代码的JSfiddle：https://jsfiddle.net/bhfr0t1m/3/ 我希望这正是您想要的。

更新：

如果您想将正方形图像变成圆形，可以使用以下代码。

.circleDiv{
  position: relative;
  background-color: #09f;
  margin: 30px 70px 30px 70px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  overflow:hidden;
}

.circleDiv a img{
  border-radius: 50%;
   transform: translate(50%,50%);
   height: 50%;
    width: 50%;
    display: block;
}

.circleDiv a img:hover{
    height: 100%;
    width: 100%;
    transform: translate(0,0);
   
  }

<div class="circleDiv">
    <a href='#'><span><img src="http://s27.postimg.org/6ndnxsbqr/index.jpg"/></span></a>
</div>