I have two divs, both with 0.6 opacity. I need them to overlap but retain their opacity and not create a new combined opacity level. I can't use an image.
我有兩個div,都是0。6不透明度。我需要它們重疊,但保留它們的不透明度,不要創建一個新的組合不透明度級別。我不能使用圖像。
EDIT -- The little circle is supposed to have a canvas element in it. Not sure if pseudo-elements would be the best solution.
編輯——這個小圈子里應該有一個畫布元素。不確定偽元素是否是最好的解決方案。
Is there anyway to do this with CSS, or should I just use canvas?
用CSS來做這個,還是用canvas來做?
example -
的例子,
http://dabblet.com/gist/1566209
http://dabblet.com/gist/1566209
HTML:
HTML:
<div id="foo">
<div id="bar">
</div>
</div>
CSS:
CSS:
/**
* Double Opacity
*/
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;
}
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.
這種方法與我最初的想法有點不同……但結果是一樣的。
:before
.rotate(180deg)
and moved to fit on the corner of the <div>
.opacity
of that circle to 0.6
.<div>
itself is not affected by the opacity
.:after
element and put an image as background
(you can control this via js if needed)border-radius
, box-shadow
, border
) to show how easily and independent this element can be controlled.opacity
to 0.3
to show the resultHERE'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切換它們。
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
</div>
$(".first, .second").hover(function() {
$(".wrapper, .first, .second").not(this).toggleClass("add-opacity");
});
CODEPEN
Hope this helps.
希望這個有幫助。
本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2012/01/05/7205b7703050c0f8f7d184a2004382f4.html。