37  

SUMMARY:

簡介:

Depending on what is needed it can be tricky but the basic approach is pretty straight forward.

取決於需要什么，這可能很棘手，但基本的方法是非常直接的。

I wrote an entire article about it here:

我在這里寫了一整篇文章

it might be easier to read.

它可能更容易閱讀。

http://dream-world.us/2012/01/07/overlapping-transparent-divs-with-one-border/

http://dream-world.us/2012/01/07/overlapping-transparent-divs-with-one-border/

This approach is a little different from my first thought... but this has the same result.

這種方法與我最初的想法有點不同……但結果是一樣的。

1. I made a black/transparent pattern for the circle and set it to :before.
2. 我為圓圈做了一個黑色/透明的圖案，並將其設置為:before。
3. The circle is then transformed rotate(180deg) and moved to fit on the corner of the <div>.
4. 然后將圓轉換為rotate(180deg)，並將其移動到
   的角落。
5. Then I set the opacity of that circle to 0.6.
6. 然后我將圓的不透明度設為0。6。
7. The <div> itself is not affected by the opacity.
8. 本身不受不透明度的影響。
9. Next I added the :after element and put an image as background (you can control this via js if needed)
10. 接下來，我添加了:after元素並將一個圖像作為背景(如果需要，可以通過js來控制它)
11. I added some effects to the image (border-radius, box-shadow, border) to show how easily and independent this element can be controlled.
12. 我在圖像中添加了一些效果(邊框半徑、框陰影、邊框)，以顯示這個元素是多么容易控制和獨立。
13. I used a lighter background and set the opacity to 0.3 to show the result
14. 我使用了一個較亮的背景，並將不透明度設為0.3以顯示結果

HERE'S THE FIDDLE: http://jsfiddle.net/pixelass/nPjQh/4/

這是小提琴:http://jsfiddle.net/pixelass/nPjQh/4/

Look at this version for some crazy results: http://jsfiddle.net/pixelass/nPjQh/5/

看看這個版本，可以得到一些瘋狂的結果:http://jsfiddle.net/pixelass/nPjQh/5/

each of these examples only use a single div element

每個示例只使用一個div元素

Basic rules. (these rules "could" be used to create a dynamic behavior with js)

基本規則。(這些規則“可以”用於創建帶有js的動態行為)

position = absolute;

位置=絕對;

top = circleHeight / -2;

頂部=圈高/ -2;

left = circleHeight / -2; //(left = top)

左=圈高/ -2;/ /(左=最高)

rotation = 180deg;

旋轉= 180度;

opacity = valueAofBackground;

不透明度= valueAofBackground;

bgColor = valueRGBofBackground;

背景= valueRGBofBackground;

#inner {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.3);
    padding:20px;
    border-radius: 20px;
    border-top-left-radius: 0;
}
#inner:before {
    content: "";
    background-image: -webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    height: 40px;
    width: 40px;
    border-radius: 40px;
    position: absolute;
    top: -20px;
    left: -20px;
    -webkit-transform: rotateZ(180deg);
    opacity:0.3;
}
#inner:after {
    content: "";
    background: url('http://lorempixel.com/10/10/sports/1/') no-repeat;
    background-position:0;
    height: 10px;
    width: 10px;
    border-radius: 10px;
    position: absolute;
    top: -6px;
    left: -6px;
    -webkit-box-shadow: 0 0 10px rgb(255,255,255);
    border: 1px rgb(255,255,255) solid;

}

Better explanaition

更好的explanaition

Original commented version http://jsfiddle.net/pixelass/nPjQh/10/

最初的評論版http://jsfiddle.net/pixelass/nPjQh/10/

see the comments in the code below

請參閱下面代碼中的注釋

#inner {
background: rgba(0,0,0,0.5) /*this is the full color-code of the div (with alpha)*/
}
#inner:before {
    /*the solid color of the circle = rgbValue of the div*/
    background-image: -webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    /*opacity of the circle = alpha of the div*/
    opacity: 0.5;
}

This example has a full transparent div ...the circle is a "pacman"- shape: http://jsfiddle.net/pixelass/nPjQh/14/

這個例子有一個完整的透明div…圓圈是一個“pacman”——形狀:http://jsfiddle.net/pixelass/nPjQh/14/

Managing the offset of the circle

管理圓的偏移量

Look at these examples that handle the offset of the circle (NOT USING PSEUDEO-ELEMENTS)

看看這些處理圓的偏移量的例子(不使用偽元素)

1:1 copy of the OP's code (15px offset): http://jsfiddle.net/pixelass/nPjQh/12/

OP代碼(15px偏移量):http://jsfiddle.net/pixelass/nPjQh/12/

With a lot smaller offset (5px): http://jsfiddle.net/pixelass/nPjQh/13/

有更小的偏移量(5px): http://jsfiddle.net/pixelass/nPjQh/13/

(the content has the same opacity as the circle)

(內容與圓形相同不透明度)

How does the offset work?

如何抵消?

Control the background-size vs. the top and left

控制背景尺寸與頂部和左邊。

Rules:

規則:

top = left;

頂級=左;

background-size = elementHeight * 2 + top * 2;

背景尺寸= elementHeight * 2 + top * 2;

Look at the flower (it is also only one <div> with pseudo-elements) the background-size is bigger than the circle. which creates the green leaves on the bottom

看花(它也是只有一個

http://jsfiddle.net/pixelass/nPjQh/15/

http://jsfiddle.net/pixelass/nPjQh/15/

CURRENT PROBLEM

當前的問題

See this fiddle: http://jsfiddle.net/pixelass/nPjQh/16/

看到這個小提琴:http://jsfiddle.net/pixelass/nPjQh/16/

If not using another layer as seen in the examples at the top of the post the content will be transparent. So if you only need an image inside the circle the above examples will work fine.

如果不像在文章頂部的例子中那樣使用另一個層，那么內容將是透明的。因此，如果你只需要一個圖像在圓里面，上面的例子將會很好地工作。

HOW TO SOLVE THIS ISSUE

如何解決這個問題

If you need a canvas or another div inside the circle you would have to put the circle on the div and layer the needed div over the circle

如果您需要一個畫布或另一個div在圓中，您需要將圓放在div中，並將需要的div放在圓上

See this fiddle: http://jsfiddle.net/pixelass/nPjQh/17/

看到這個小提琴:http://jsfiddle.net/pixelass/nPjQh/17/

change around a little and it will work fine. GET THE CODE FROM THE FIDDLE

稍微改變一下就可以了。從小提琴中獲取代碼。

Different shape /advanced Styling

不同的形狀/高級樣式

If you use a different shape with flat sides, you could even put a border around the sum of the two divs.. or even add a box shadow

如果你用一個不同的形狀和平的邊，你甚至可以在兩個div的和上加一個邊框。甚至添加一個框陰影

still using the simple markup of....

仍在使用的簡單標記....

<div id="foo">
    <div id="bar">
    </div>
</div>

See the fiddle for the box-shadow: http://jsfiddle.net/pixelass/nPjQh/21/

請參閱box-shadow的小提琴:http://jsfiddle.net/pixelass/nPjQh/21/

Apply a border to the circle

對圓圈應用邊框

Using -webkit-mask-image we could add a border to the circle. http://jsfiddle.net/pixelass/nPjQh/24/

使用-webkit-mask-image，我們可以向圓圈添加邊框。http://jsfiddle.net/pixelass/nPjQh/24/

More examples:

更多的例子:

Four circles around the div

四圈圍繞div

http://jsfiddle.net/pixelass/nPjQh/25/

http://jsfiddle.net/pixelass/nPjQh/25/

Markup:

標記:

<div id="foo">
    <div id="bar1"></div>
    <div id="bar2"></div>
    <div id="bar3"></div>
    <div id="bar4"></div>
</div>

Using this technique to make a tooltip

使用此技術制作工具提示

http://jsfiddle.net/pixelass/nPjQh/31/

http://jsfiddle.net/pixelass/nPjQh/31/

Markup:

標記:

<div id="foo">
    <div id="bar"></div>
    I am a pure css tooltip with a semi-transparent background and a black border. <br/>
    My width is static an my height is dynamic...
</div>

10  

I think the only way would be to do the opacity separately,

我認為唯一的方法是分別進行不透明處理，

e.g. http://dabblet.com/gist/1566278

例如,http://dabblet.com/gist/1566278

2  

Revised Answer

修改后的答案

This fiddle is compatible with IE9 and resolves the duplication of background needed in my original answer. It does use pseudoelements to generate the circle. This solution spins off pixelass's "pacman" idea, only instead of using the newer background gradient css to generate, it uses the older (and little used or understood) clip property to make the circle in two parts. This solved the issue of your circle not being "centered" at the corner.

這個提琴與IE9兼容，解決了我原始答案所需的背景重復。它確實使用偽元素來生成圓。這個解決方案借鑒了pixelass的“pacman”概念，只是使用了舊的(很少使用或理解的)剪輯屬性，而不是使用新的背景漸變css來生成圓形。這解決了你的圈子不以“居中”為中心的問題。

#foo {
    height:150px;
    width:250px;
    background: rgba(0, 0, 0, 0.6);
    position:absolute;
    left:40%;
    top:20%;
}

#bar {
    height:40px;
    width:40px;
    position:absolute;
    top:-15px;
    left:-15px;
    line-height: 40px;
}

#bar:before,
#bar:after {
    content: '';
    display: block;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 40px;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
}

#bar:before {
    clip: rect(0 40px 15px 0);
}

#bar:after {
    clip: rect(15px 15px 40px 0);
}

Original Answer

原來的答案

You can do this (see fiddle). It pushes the circle below and "overlays" the portion that overlaps with a pseudoelement to reestablish the background color of the body:

你可以這樣做。它把下面的圓推下去，“覆蓋”與偽元素重疊的部分，以重建身體的背景色:

body{background:green;}

#foo{
height:150px;
width:250px;
background:rgba(0, 0, 0, 0.6);
position:absolute;
left:40%;
top:20%;
}

#bar{
height:40px;
width:40px;
background:rgba(0, 0, 0, 0.6);
border-radius:40px;
position:absolute;
top:-15px;
left:-15px;
z-index: -1;
}

#bar:after {
    content: '';
    display: block;
    background: green;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 25px;
    height: 25px;
}

1  

How about this: http://jsfiddle.net/rudiedirkx/TqRCw/

這個怎么樣:http://jsfiddle.net/rudiedirkx/TqRCw/

(Dabble's editor sucks!!)

(涉獵的編輯很糟糕! !)

It can't be done with only pseudo elements sadly =(

可惜只能用偽元素=(

It can be done with only pseudo elements! See pixelass' answer. CSS3 is a requirement though.

它只能用偽元素完成!看到pixelass回答。CSS3是一個要求。

0  

I have created a Q/A to handle this scenario along with the 'hover' of such overlapped elements.

我創建了一個Q/ a來處理這個場景，並對這些重疊的元素進行“懸停”處理。

Overlapped elements with opacity and handling the 'hover' on those.

重疊的元素與不透明度和處理'懸停'在那些。

The solution is basically to set the opacity in the parent level instead directly on the children elements and to toggle those while hover, with JS.

解決方案基本上是在父級設置不透明度，而不是直接在子元素上設置，並在鼠標懸停時用JS切換它們。

HTML

<div class="wrapper">
  <div class="first"></div>
  <div class="second"></div>
</div>

JS

$(".first, .second").hover(function() {
  $(".wrapper, .first, .second").not(this).toggleClass("add-opacity");
});

CODEPEN

CODEPEN

Hope this helps.

希望這個有幫助。