Question

呃这很难说清楚。最好通过查看这个jsfiddle来解释：http://jsfiddle.net/aLKdk/5/

所以问题在于，木质纹理被破坏了因为子元素正在使用background：inherit，它再次启动了背景。有没有办法实现这个目标？

标记：

<div class="div1">
  <div class="div2"> </div>
  <div class="div3"> </div>
</div>

样式：

.div1 {
    width: 400px;
    height: 400px;    
    background: url(http://blog.webair.it/wp-content/uploads/2009/06/wood-texture-1.jpg);
}

.div2 {
    position: absolute;
    height: 100px;
    width: 100px;
    top: 100px;
    left: 100px;
    background-color: lightyellow;
}

.div3 {
    position: absolute;
    height: 50px;
    width: 50px;
    background: inherit;
    border-radius: 25px;
    top: 175px;
    left: 125px;
    z-index: 1;
}

Answer 1

从长远来看，我认为径向梯度可能是更好的解决方案。它更具语义性，并且不需要垃圾标记来进行美容效果。

background-image: radial-gradient(circle 25px at 50% 100%, transparent 25px, lightyellow 25px);
background-image: -webkit-radial-gradient(50% 100%, circle, transparent 25px, lightyellow 25px);

http://jsfiddle.net/AcA9k/1/

Answer 2

你可以在铺设木质纹理的两个容器上使用background-attachement:fixed来解决这个问题。

<强> DEMO

我在这里用速记写作：background: url(http://blog.webair.it/wp-content/uploads/2009/06/wood-texture-1.jpg) fixed;

Answer 3

如果将以下内容添加到div3，则应该能够将背景重新定位到所需位置。我实际上没有弄清楚这些值是什么，所以当你把这些值放在一起时它们看起来不正确但是你应该能够改变它们以获得理想的效果。

.div3 {
  background-image: inherit;
  background-position: 125px 175px;
}

Answer 4

您是否一直试图让BG在圆形区域看起来正确？

最快的修复（对于不变的位置）是使用背景位置... 不是调整思想面积的最佳解决方案。

添加到此fiddle 使用background-position: -111px -167px;

如何使用CSS3并使一个元素对其父元素的透明覆盖另一个元素？

4 个答案: