Question

由于某种原因，当使用变换规则后面的元素或图像是绝对定位时，图像不会在边界半径框中溢出时隐藏。它只出现在第二个或更多元素上。

我在Jsfiddle上提出了这个问题的一个例子：http://jsfiddle.net/033o1zg3/6/

看起来像一个webkit错误，或者我做错了什么？

HTML

    <a href="#">
        <div class="circle">
            <img alt="logo" src="http://lorempixel.com/g/400/200">
        </div>
        <div>
            <p data-url="/api/locationdata/location-total/1"><i class="fa fa-circle-o-notch fa-spin"></i></p>
        </div>
    </a>
    <a href="#">
        <div class="circle">
            <img alt="logo" src="http://lorempixel.com/g/400/200">
        </div>
        <div>
            <p data-url="/api/locationdata/location-total/1"><i class="fa fa-circle-o-notch fa-spin"></i></p>
        </div>
    </a>

CSS

   a {
        float: left;
        width: 150px;
        background: #ccc;
        margin: 10px;
    }
    .circle {
        width: 100px;
        height: 100px;
        display: block;
        margin: 0 auto;
        position: relative;
        top: 0px;
        overflow: hidden;
        margin-top: -30px;
        border-radius: 100%;
        border: 3px solid #bcbf00;
    }
    .circle img {
        height: 100%;
        position: absolute;
        top: -9999px;
        left: -9999px;
        bottom: -9999px;
        right: -9999px;
        margin: auto;
    }
    p {
        width: 100%;
        text-align: center;
    }

Answer 1

好的，在How to make CSS3 rounded corners hide overflow in Chrome/Opera

上找到了解决方案

看起来像webkit中的一个错误。唯一的事情是你需要在包装div中添加它。在我的情况下.circle。

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

Answer 2

尝试handleResponse(response) { for (var i = 0; i < response.items.length; i++) { var item = response.items[i]; var a = item.volumeInfo.title; var selfL = item.selfLink; //var b = a.link("book-description.html"); var image = item.volumeInfo.imageLinks.smallThumbnail; document.getElementById("content").innerHTML += "</br>" + "</br>" + "<br>" + "<img src =" + "'" + image + "'" + " class='im'/>"; document.getElementById("content").innerHTML += "<h4 class='right'>" + "<a href = 'book-description.html'id = " + "'" + selfL + "'" + "onclick ='get(this);'>" + a + "</a></h4>"; function get(e) { var link = e.id; localStorage.setItem("Link", link); } document.getElementById("content").innerHTML += "<h4 class='right'>" + "AUTHOR:" + item.volumeInfo.authors + "</h4>"; document.getElementById("content").innerHTML += "<h5 class='right'>" + "PUBLISHER:" + item.volumeInfo.publisher + "</h5>"; var rating = item.volumeInfo.averageRating; if (rating) { document.getElementById("content").innerHTML += "<h5 class='right' id='rating'>" + rating + "</h5>"; } else { document.getElementById("content").innerHTML += "<h5 class = 'right' id ='rating'>Not Rated Yet</h5>"; } //document.getElementById("content").innerHTML += "<br>" + "<br>" + "<br>" + item.volumeInfo.publisheddate; } }

边界半径和变换上的Webkit溢出问题

2 个答案: