Article Introduction: Rgba background transparent and border transparent overlapping issues. |
Rgba background transparent and border transparent overlapping issues.
The code is as follows:
0 S |
. Box3{width:250px;height:250px;background-color:rgba (255,255,255,0.5); border:5px solid Rgba (0,0,0,0.5); box2{ Width:250px;height:250px;background-color:rgba (0,0,0,0.5); border:5px solid Rgba (0,0,0,0.5); |
Border color and background research are stacked together.
Original background default from border start rendering ~ border color and background color overlap naturally different ~
Solution:
1 2 |
. Box3{width:250px;height:250px;background-color:rgba (255,255,255,0.5); border:5px solid Rgba (0,0,0,0.5); Background-clip:content-box;} . Box2{width:250px;height:250px;background-color:rgba (0,0,0,0.5); border:5px solid Rgba (0,0,0,0.5); background-clip : Content-box;} |
Add: Background-clip:content-box to crop the background from the content area.