位置：边界半径内的绝对和溢出：隐藏

我有一个问题，在WebKit浏览器border-radius，发现通过以下网址的解决方案：使用另一个元素 How to make CSS3 rounded corners hide overflow in Chrome/Opera 位置：边界半径内的绝对和溢出：隐藏

但IAM与position: absolute;这现在里面我需要与圆角的边框标题太多，但不知道如何

注：我不能用其他border-radius的标题，因为这将有一个动画

看到代码：

个

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Problem</title> 
    <style type="text/css"> 
    img { 
     border: 0; 
    } 

    a { 
     text-decoration: none; 
    } 

    .wrap-events { 
     float: left; 
     position: relative; 
     width: 500px; 
     height: 250px; 
    } 

    .events { 
     overflow: hidden; 

     -webkit-border-radius: 50px; 
     -moz-border-radius: 50px; 
     border-radius: 50px; 
    } 

    .caption { 
     position: absolute; 
     width: 100%; 
     bottom: 0; 
     color: #FFFFFF; 
     background-color: #151515; 
     font: 12px "Arial", Helvetica, sans-serif; 

     opacity: 0.6; 

     border-radius: 0 0 50px 50px; /* add border-radius to caption */ 
    } 

    .caption p { 
     padding: 10px; 
    } 
    </style> 
</head> 
<body> 
    <div class="wrap-events"> 
     <div class="events"> 
      <a href="#"> 
       <img src="http://www.cg-auto.com.br/forum/imagens/imagens_news/26c4dc4359edcfd4c6871ee1fa958539.jpg" alt="image"> 
      </a> 
      <div class="caption"> 
       <p>This is a caption</p> 
      </div> 
     </div> 
    </div> 
    <button id="slide">Slide It!</button> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $('#slide').click(function(){ 
      $('.caption').hide().slideDown(2000); 
     }); 
    </script> 
</body> 
</html>

欢呼

来源

2012-03-24 JaNightmare

我可以为您提供[JS小提琴演示]（http://jsfiddle.net/davidThomas/B6FPE/）吗？如果我们能看到你想要做的事情，它使我们更容易帮助你。 – 2012-03-24 23:13:04

似乎确定我[这里]（http://jsfiddle.net/Starx/SBBLT/） – Starx 2012-03-24 23:16:43

感谢@DavidThomas ... @Starx与'边界radius'标题中的问题可以在动画的一半可以看出，标题是非常图像干杯 – JaNightmare 2012-03-24 23:18:18

-1

这是一个问题，现在我想。我可以建议你使用fadeIn（）来代替。请参阅demo

来源

2012-03-24 23:26:45 Starx

嗯有趣的作为最后的手段......感谢您的答复 – JaNightmare 2012-03-25 00:20:02

位置：边界半径内的绝对和溢出：隐藏

回答

相关问题