如果文本在邊界之外，使其隱藏CSS和HTML

Question

我在裏面有一個圓的白色背景圖片。 圓形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;