CSS：後沒有元素背景

我想要使用CSS：在元素#text後，但沒有＃文本的背景繼續顯示後面的元素，因爲我需要它是透明的。我不能僅僅將after元素的背景改爲＃000，因爲這只是一個例子，我還應該通過它來展示其他的東西。我的代碼如下。CSS：後沒有元素背景

HTML：

<div id="text"> 
    <div class="news">This is some sample text.</div> 
</div> 
<div id="logo"></div>

CSS：

body { 
    background: #000; 
    margin: 0; 
} 

#logo { 
    position: relative; 
    float: left; 
    background: #FFFFFF; 
    width: 25%; 
    height: 80px; 
    line-height: 80px; 
    border: 1px solid #a0a4b0; 
    border-top: 0; 
    border-radius: 0 0 8px 8px; 
    text-align: center; 
    box-sizing: border-box; 
} 

#text { 
    position: relative; 
    background: #FFFFFF; 
    border: 1px solid #a0a4b0; 
    border-width: 0 1px 0 1px; 
    padding: 5px 30px 15px; 
    z-index: 100; 
    line-height: 1.1; 
} 

#text:after { 
    content: " "; 
    position: absolute; 
    bottom: -1px; 
    right: 1px; 
    width: 75%; 
    box-sizing: border-box; 
    height: 8px; 
    border: 1px solid #a0a4b0; 
    border-width: 1px 0 0 1px; 
    border-radius: 8px 0 0 0; 
}

Fiddle Example

來源

2014-09-30 fanfavorite

我不明白，爲什麼你不能只是將背景設置爲一些RGBA顏色？ – Charles 2014-09-30 20:09:30

僞元素應放在元素本身的下方。對於外曲線，一個容易的選擇是使用的box-shadow：

#text:after { 
    content: " "; 
    position: absolute; 
    bottom: -8px; /* move below parent's background */ 
    right: 1px; 
    width: 75%; 
    box-sizing: border-box; 
    height: 8px; 
    border: 1px solid #a0a4b0; 
    box-shadow: -4px -4px 0 4px #fff; /* white outside rounded corner */ 
    border-width: 1px 0 0 1px; 
    border-radius: 8px 0 0 0; 
}

編輯小提琴：http://jsfiddle.net/fzd9xd07/1/

來源

2014-09-30 20:23:09

使用此

#text:after { 
    content: url(http://www.smashingapps.com/wp-content/uploads/2009/06/create-a-slick-tabbed-content-area-using-css-and-jquery.jpg); 
    position: absolute; 
    bottom: -1px; 
    right: 1px; 
    width: 75%; 
    box-sizing: border-box; 
    height: 8px; 
    border: 1px solid #a0a4b0; 
    border-width: 1px 0 0 1px; 
    border-radius: 8px 0 0 0; 
}

來源

2014-09-30 20:06:38

CSS：後沒有元素背景

回答

相關問題