html - 如果文本在边框之外，将其隐藏 CSS 和 HTML

Question

我里面有一个圆形的 div 白色背景图片。 圆形 div 外面的图片被隐藏了，我可以只对段落文本 whit css 和 html 做同样的事情吗？这是 JSfiddle

<div class="containereye">
  <div class="eye">
    <p class="eyetext">hello</p>
  </div>
</div>

.containereye{
  width:200px;
  height:200px;
}
.eye{
  box-sizing: border-box;
  box-shadow:0 5px 5px black inset;
width: 150px;
height: 150px;
border-radius: 100%;
background-image: url("http://i0.wp.com/himcistka.ru/wp-content/uploads/2015/03/centrifugaphotoshop-e1444999478943fs.jpg");
background-size: 250px;
background-position: center;
    -webkit-transition: background-size .5s ease-in-out; /* For Safari 3.1 to 6.0 */
    transition: background-size .5s ease-in-out;
    background-repeat: no-repeat;

}
.eyetext{
  background:red;

}
.eye:hover{
  background-size: 350px;
}

Answer 1

可以。像这样修改 .eye CSS 类:

.eye{
  overflow: hidden;
  box-sizing: border-box;
  box-shadow:0 5px 5px black inset;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  background-image: url("http://i0.wp.com/himcistka.ru/wp-content/uploads/2015/03/centrifugaphotoshop-e1444999478943fs.jpg");
  background-size: 250px;
  background-position: center;
  -webkit-transition: background-size .5s ease-in-out; /* For Safari 3.1 to 6.0 */
  transition: background-size .5s ease-in-out;
  background-repeat: no-repeat;