Question

这是我的HTML：

http://jsfiddle.net/aALJ6/（使用此功能，可能是最好的）

<article>
<a href="http://www.somepage.com">
    <header>
        <div class="details">   
            <h1>Title</h1>
            <p>More text</p>
        </div>
    </header>
    <span class="bw-wrap"><img src="http://lorempixel.com/353/324/sports/" alt="NASA Space Apps Challenge" class="bw" /></span>
    <span class="clr-wrap"><img src="http://lorempixel.com/353/324/sports/" alt="NASA Space Apps Challenge" class="clr" /></span>
</a>
</article>

这就是CSS：

article {
    background:#d0d0d0;
    border:1px solid #b9b9b9;
    border-radius:150px;
    float:left;
    margin:0 0 30px 30px;
    overflow:hidden;
    padding:9px;
    position:relative;
    transition:all 0.2s ease-in;
    -webkit-transition:all 0.1s ease-in;
    -moz-transition:all 0.1s ease-in;
    -o-transition:all 0.1s ease-in;
    width:280px;
    height:280px
}
img {
    border-radius:140px;
    position:absolute;
    top:9px;
    left:9px;
    overflow: hidden;
}
.clr {
    opacity:0;
    z-index:1;
    transition:all 0.2s ease-in;
    -webkit-transition:all 0.2s ease-in;
    -moz-transition:all 0.2s ease-in;
    -o-transition:all 0.2s ease-in
}
article:hover.clr {
    opacity:1
}
.portfolio-single {
    float:left;
    padding-bottom:30px;
    position:relative;
    width:100%
}
article:hover {
    background:#272123;
    border:1px solid #272123
}
h1 {
    position: absolute;
    left: 65px;
    top: -20px;
    z-index:100;
    text-align:center;
}
p {
    position: absolute;
    left: 95px;
    top: 30px;
    z-index:100;
    text-align:center;
}
article {
    background:#d0d0d0;
    border:1px solid #b9b9b9;
    border-radius:150px;
    float:left;
    margin:0 0 30px 30px;
    overflow:hidden;
    padding:9px;
    position:relative;
    transition:all 0.2s ease-in;
    -webkit-transition:all 0.1s ease-in;
    -moz-transition:all 0.1s ease-in;
    -o-transition:all 0.1s ease-in;
    width:280px;
    height:280px
}
img {
    border-radius:140px;
    position:absolute;
    top:9px;
    left:9px;
    overflow: hidden;
}
.clr {
    opacity:0;
    z-index:1;
    transition:all 0.2s ease-in;
    -webkit-transition:all 0.2s ease-in;
    -moz-transition:all 0.2s ease-in;
    -o-transition:all 0.2s ease-in
}
article:hover.clr {
    opacity:1
}
.portfolio-single {
    float:left;
    padding-bottom:30px;
    position:relative;
    width:100%
}
article:hover {
    background:#272123;
    border:1px solid #272123
}
h1 {
    position: absolute;
    left: 65px;
    top: -20px;
    z-index:100;
    text-align:center;
}
p {
    position: absolute;
    left: 95px;
    top: 30px;
    z-index:100;
    text-align:center;
}

我知道这很复杂，但问题就在眼前：这个带有细节类的div基本上是一个黑色矩形，我希望它包含在文章/ img的圆圈内。它们有一个圆形边框，这是我在不透明度达到100％时想要看到的。为了显示问题所在，我将默认不透明度设为50％，因为您可以看到，当此div处于静止状态时，所有裁剪都有效，但在动画期间，会显示完整的矩形，然后才会显示，这真的毁了东西。

Answer 1

有效！

HTML：

<img class="logo-mask" src="Text2.svg" />

CSS：

.logo-mask {
opacity:0; 
position:absolute;
-webkit-mask-image: url("TextMask2.svg");
}

有了它，这一切都很好用。太糟糕了，Dreamweaver似乎并没有意识到这一点，因此我没有得到真正的更新，但浏览器似乎接受了它。非常感谢!!!

如何HTML / CSS限制/剪辑/屏蔽对象？

1 个答案: